미디어위키:Test.css

/* =========================================
   TEST REMAKE v2
   2000s Industrial Game Site Skin
   ========================================= */

body.page-대문 {
    background: #000 !important;
    color: #d8d8d8 !important;
}

/* 배경: 레트로웨이브 그리드 대신 어두운 금속/콘크리트 타일 */
body.page-대문 .WW-bg {
    background:
        repeating-linear-gradient(
            0deg,
            #030303 0px,
            #030303 15px,
            #050505 16px
        ),
        #000 !important;
}

body.page-대문 .WW-bg::before {
    animation: none !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0.42 !important;
    filter: none !important;
    background-image:
        linear-gradient(rgba(120,120,120,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,120,120,0.10) 1px, transparent 1px),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.018) 0px,
            rgba(255,255,255,0.018) 1px,
            transparent 1px,
            transparent 6px
        ) !important;
    background-size:
        64px 64px,
        64px 64px,
        6px 6px !important;
}

body.page-대문 .WW-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.05), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(255,255,255,0.025), transparent 32%);
    opacity: 0.55;
}

/* 전체 폭 */
body.page-대문 #clbi-top-nav-wrap {
    width: min(2024px, calc(100% - 16px)) !important;
    padding: 8px 8px 0 !important;
}

body.page-대문 .content-wrapper {
    max-width: 2024px !important;
    padding: 8px !important;
    gap: 8px !important;
}

body.page-대문 .container-fluid.liberty-content {
    margin: 0 8px !important;
}

/* 상단 네비게이션: 구형 게임 사이트 탭 */
body.page-대문 #clbi-top-nav {
    border-radius: 0 !important;
    border-top: 1px solid #777 !important;
    border-left: 1px solid #666 !important;
    border-right: 1px solid #050505 !important;
    border-bottom: 1px solid #000 !important;
    background:
        linear-gradient(to bottom, #303030 0%, #1a1a1a 48%, #090909 100%) !important;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.18),
        inset -1px -1px 0 rgba(0,0,0,0.90),
        2px 2px 0 #000 !important;
    overflow: visible !important;
}

body.page-대문 #clbi-top-nav-main {
    min-height: 36px !important;
}

body.page-대문 .clbi-top-nav-item {
    width: 118px !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 0 !important;
    border-left: 1px solid #3f3f3f !important;
    border-right: 1px solid #050505 !important;
    background:
        linear-gradient(to bottom, #2b2b2b 0%, #171717 50%, #0a0a0a 100%) !important;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.13),
        inset -1px -1px 0 rgba(0,0,0,0.85) !important;
    color: #e0e0e0 !important;
    font-size: 11px !important;
    text-shadow: 1px 1px 0 #000 !important;
}

body.page-대문 .clbi-top-nav-item:hover,
body.page-대문 .clbi-top-nav-item.clbi-tnav-active {
    background:
        linear-gradient(to bottom, #3a3a3a 0%, #202020 50%, #0d0d0d 100%) !important;
    color: #fff !important;
}

body.page-대문 .clbi-tnav-icon,
body.page-대문 .clbi-icon {
    filter: grayscale(1) brightness(1.75) contrast(0.92) !important;
    opacity: 0.9 !important;
}

body.page-대문 #clbi-top-nav-search {
    align-items: center !important;
}

body.page-대문 #clbi-top-search-input {
    width: 260px !important;
    height: 22px !important;
    padding: 2px 7px !important;
    border-radius: 0 !important;
    border-top: 1px solid #050505 !important;
    border-left: 1px solid #050505 !important;
    border-right: 1px solid #565656 !important;
    border-bottom: 1px solid #555 !important;
    background: #050505 !important;
    color: #dcdcdc !important;
    font-size: 11px !important;
    box-shadow:
        inset 2px 2px 3px rgba(0,0,0,0.95),
        inset -1px -1px 0 rgba(255,255,255,0.08) !important;
}

body.page-대문 #clbi-sub-worldbuilding {
    border-top: 1px solid #050505 !important;
    background: #0b0b0b !important;
}

body.page-대문 .clbi-tnav-sub-item {
    min-height: 24px !important;
    padding: 0 14px !important;
    border-radius: 0 !important;
    border-right: 1px solid #050505 !important;
    background:
        linear-gradient(to bottom, #242424 0%, #141414 52%, #070707 100%) !important;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.10),
        inset -1px -1px 0 rgba(0,0,0,0.78) !important;
    color: #e5e5e5 !important;
    font-size: 10px !important;
    text-shadow: 1px 1px 0 #000 !important;
}

/* 좌우 사이드바: 위젯 카드 대신 구형 장비 패널 */
body.page-대문 #clbi-left-sidebar,
body.page-대문 #clbi-right-sidebar {
    width: 230px !important;
    gap: 8px !important;
}

body.page-대문 .clbi-left-box,
body.page-대문 .clbi-right-box {
    border-radius: 0 !important;
    border-top: 1px solid #777 !important;
    border-left: 1px solid #666 !important;
    border-right: 1px solid #050505 !important;
    border-bottom: 1px solid #000 !important;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.020) 0px,
            rgba(255,255,255,0.020) 1px,
            transparent 1px,
            transparent 5px
        ),
        linear-gradient(to bottom, #1b1b1b 0%, #101010 100%) !important;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.12),
        inset -1px -1px 0 rgba(0,0,0,0.85),
        2px 2px 0 #000 !important;
    overflow: hidden !important;
}

body.page-대문 .clbi-left-title,
body.page-대문 .clbi-right-title {
    min-height: 23px !important;
    padding: 5px 8px !important;
    border-bottom: 1px solid #050505 !important;
    background:
        linear-gradient(to bottom, #303030 0%, #1b1b1b 55%, #090909 100%) !important;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.16),
        inset 0 -1px 0 rgba(0,0,0,0.85) !important;
    color: #f0f0f0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-shadow: 1px 1px 0 #000 !important;
}

body.page-대문 .clbi-left-content,
body.page-대문 .clbi-right-content {
    padding: 8px !important;
    color: #c8c8c8 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    background: #0b0b0b !important;
}

/* 검색은 상단 하나만 남김 */
body.page-대문 #clbi-right-sidebar .clbi-right-box:has(#clbi-title-search) {
    display: none !important;
}

/* 왼쪽 뉴스 박스는 사이트 체인지로그 성격만 남김 */
body.page-대문 #clbi-left-news-recent-title,
body.page-대문 #clbi-left-recent-list,
body.page-대문 .clbi-news-divider {
    display: none !important;
}

body.page-대문 .clbi-left-news-box,
body.page-대문 .clbi-news-box {
    min-height: 0 !important;
}

body.page-대문 .clbi-news-feed-title {
    color: #9a9a9a !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
}

body.page-대문 .clbi-recent-item {
    padding: 4px 5px !important;
    margin-bottom: 4px !important;
    border-top: 1px solid #232323 !important;
    border-left: 1px solid #232323 !important;
    border-right: 1px solid #050505 !important;
    border-bottom: 1px solid #050505 !important;
    background: #141414 !important;
}

body.page-대문 .clbi-recent-title {
    color: #d8d8d8 !important;
    font-size: 10px !important;
    text-decoration: none !important;
}

body.page-대문 .clbi-recent-title:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

body.page-대문 .clbi-recent-time {
    color: #8a8a8a !important;
    font-size: 9px !important;
}

/* 로고 영역: 넓은 광고 배너 같은 처리 */
body.page-대문 #clbi-main-logo {
    margin: 0 auto 8px !important;
    padding: 10px 0 8px !important;
    border-top: 1px solid #777 !important;
    border-left: 1px solid #666 !important;
    border-right: 1px solid #050505 !important;
    border-bottom: 1px solid #000 !important;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(255,255,255,0.09), transparent 45%),
        linear-gradient(to bottom, #1c1c1c 0%, #080808 100%) !important;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.12),
        inset -1px -1px 0 rgba(0,0,0,0.88),
        2px 2px 0 #000 !important;
}

body.page-대문 #clbi-main-logo img {
    width: 720px !important;
    max-width: 88% !important;
    filter:
        grayscale(1)
        contrast(1.15)
        brightness(1.04)
        drop-shadow(2px 2px 0 #000) !important;
}

/* 중앙 본문 컨테이너 */
body.page-대문 .Liberty .content-wrapper .liberty-content .liberty-content-main,
body.page-대문 .liberty-content-main {
    border-radius: 0 !important;
    border-top: 1px solid #777 !important;
    border-left: 1px solid #666 !important;
    border-right: 1px solid #050505 !important;
    border-bottom: 1px solid #000 !important;
    background:
        repeating-linear-gradient(
            0deg,
            #111 0px,
            #111 18px,
            #151515 19px
        ) !important;
    color: #e0e0e0 !important;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.10),
        inset -1px -1px 0 rgba(0,0,0,0.85),
        2px 2px 0 #000 !important;
    overflow: hidden !important;
}

body.page-대문 .liberty-content-main .mw-parser-output {
    padding: 8px !important;
}

/* 대문 히어로: 주 모니터가 아니라 구형 공식 사이트 feature panel */
#clbi-main-crt-hero-wrap {
    margin: 0 auto 8px !important;
}

.clbi-y2k-hero {
    padding: 6px;
    border-top: 1px solid #777;
    border-left: 1px solid #666;
    border-right: 1px solid #050505;
    border-bottom: 1px solid #000;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.024) 0px,
            rgba(255,255,255,0.024) 1px,
            transparent 1px,
            transparent 5px
        ),
        #161616;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.12),
        inset -1px -1px 0 rgba(0,0,0,0.88),
        2px 2px 0 #000;
}

.clbi-y2k-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    box-sizing: border-box;
    border-top: 1px solid #505050;
    border-left: 1px solid #404040;
    border-right: 1px solid #050505;
    border-bottom: 1px solid #000;
    background:
        linear-gradient(to bottom, #2c2c2c 0%, #171717 58%, #080808 100%);
    color: #e6e6e6;
    font-size: 10px;
    line-height: 24px;
    text-shadow: 1px 1px 0 #000;
}

.clbi-y2k-hero-body {
    display: grid;
    grid-template-columns: 1fr 245px;
    gap: 6px;
    margin-top: 6px;
}

.clbi-y2k-feature {
    min-height: 235px;
    padding: 12px 16px;
    border-top: 1px solid #050505;
    border-left: 1px solid #050505;
    border-right: 1px solid #4c4c4c;
    border-bottom: 1px solid #555;
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.035), transparent 26%),
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.04) 0px,
            rgba(255,255,255,0.04) 1px,
            transparent 1px,
            transparent 4px
        ),
        #090909;
    box-shadow:
        inset 2px 2px 6px rgba(0,0,0,0.92),
        inset -1px -1px 0 rgba(255,255,255,0.06);
}

.clbi-y2k-feature h2 {
    margin: 0 0 10px !important;
    padding: 0 0 7px !important;
    border-bottom: 1px solid #333 !important;
    color: #f4f4f4 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    text-align: center;
    text-shadow:
        1px 1px 0 #000,
        0 0 5px rgba(255,255,255,0.25);
}

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

.clbi-y2k-sideplate {
    padding: 8px;
    border-top: 1px solid #050505;
    border-left: 1px solid #050505;
    border-right: 1px solid #444;
    border-bottom: 1px solid #555;
    background: #0a0a0a;
    box-shadow:
        inset 2px 2px 5px rgba(0,0,0,0.9),
        inset -1px -1px 0 rgba(255,255,255,0.06);
}

.clbi-y2k-plate-title {
    margin-bottom: 6px;
    padding: 5px 7px;
    border-top: 1px solid #5a5a5a;
    border-left: 1px solid #4a4a4a;
    border-right: 1px solid #050505;
    border-bottom: 1px solid #000;
    background:
        linear-gradient(to bottom, #2d2d2d 0%, #171717 55%, #070707 100%);
    color: #f1f1f1;
    font-size: 10px;
    font-weight: 700;
    text-shadow: 1px 1px 0 #000;
}

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

.clbi-y2k-mini-table td {
    padding: 5px 6px;
    border: 1px solid #252525;
    background: #121212;
    color: #cfcfcf;
}

.clbi-y2k-mini-table td:first-child {
    width: 72px;
    color: #888;
    background: #0d0d0d;
}

.clbi-y2k-home {
    font-size: 11px;
    color: #d6d6d6;
}

.clbi-y2k-home a {
    color: #e0e0e0 !important;
    text-decoration: none !important;
}

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

.clbi-y2k-ticker {
    height: 22px;
    margin-bottom: 6px;
    padding: 0 8px;
    border-top: 1px solid #555;
    border-left: 1px solid #444;
    border-right: 1px solid #050505;
    border-bottom: 1px solid #000;
    background:
        linear-gradient(to bottom, #252525 0%, #111 100%);
    color: #bdbdbd;
    font-size: 10px;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 1px 1px 0 #000;
}

.clbi-y2k-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 260px;
    gap: 6px;
}

.clbi-y2k-box {
    border-top: 1px solid #777;
    border-left: 1px solid #666;
    border-right: 1px solid #050505;
    border-bottom: 1px solid #000;
    background: #111;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.10),
        inset -1px -1px 0 rgba(0,0,0,0.85),
        2px 2px 0 #000;
}

.clbi-y2k-box-title {
    height: 24px;
    padding: 0 8px;
    border-bottom: 1px solid #050505;
    background:
        linear-gradient(to bottom, #303030 0%, #191919 56%, #080808 100%);
    color: #f1f1f1;
    font-size: 10px;
    font-weight: 700;
    line-height: 24px;
    text-shadow: 1px 1px 0 #000;
}

.clbi-y2k-box-body {
    padding: 7px;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.018) 0px,
            rgba(255,255,255,0.018) 1px,
            transparent 1px,
            transparent 5px
        ),
        #0a0a0a;
}

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

.clbi-y2k-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-height: 22px;
    padding: 4px 6px;
    box-sizing: border-box;
    border-top: 1px solid #242424;
    border-left: 1px solid #242424;
    border-right: 1px solid #050505;
    border-bottom: 1px solid #050505;
    background: #141414;
    color: #cfcfcf;
    line-height: 1.35;
}

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

.clbi-y2k-meta {
    color: #888;
    white-space: nowrap;
    font-size: 9px;
}

.clbi-y2k-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 6px;
}

.clbi-y2k-counter {
    padding: 6px;
    border-top: 1px solid #050505;
    border-left: 1px solid #050505;
    border-right: 1px solid #444;
    border-bottom: 1px solid #555;
    background: #070707;
    text-align: center;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.9);
}

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

.clbi-y2k-counter span {
    display: block;
    margin-top: 3px;
    color: #8d8d8d;
    font-size: 9px;
}

.clbi-y2k-guest {
    padding: 6px;
    border-top: 1px solid #242424;
    border-left: 1px solid #242424;
    border-right: 1px solid #050505;
    border-bottom: 1px solid #050505;
    background: #141414;
    color: #c7c7c7;
    font-size: 10px;
    line-height: 1.45;
}