미디어위키:MainPage.css

/* =========================================
COASTLINE: BLACK ICE - MainPage
로고 + 카테고리 네비 + 선언문 대문
========================================= */

/*
책임 범위
-----------------------------------------
- 대문 본문 .main-portal 내부만 담당한다.
- 사이트 공통 셸은 Layout.css가 담당한다.
- 카테고리 네비의 SVG 구조는 CategoryNav.js가 생성한다.
- 콘솔, 그래프, STATUS, INFORMATION, PROJECTS는 대문에서 제거한다.
- 「진창」 선언문 배치는 이 파일이 담당하며, 폰트 선언은 Theme.css가 담당한다.
*/

.main-portal {
    --panel:#1d1d1d;
    --well:#080808;
    --edge:#050505;
    --highlight:#555555;
    --shadow:#101010;
    --text:#e2e2e2;
    --text-strong:#ffffff;
    --block-gap:2px;
    --frame:8px;
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    color:var(--text);
    background:transparent;
    font-size:12px;
    line-height:18px;
    box-sizing:border-box;
}

body.action-view.clbi-main-page .liberty-content-main .mw-parser-output {
    display:flex !important;
    flex-direction:column !important;
}

body.action-view.clbi-main-page .liberty-content-main .mw-parser-output > .main-portal {
    flex:1 0 auto;
    min-height:0;
}

.main-portal *,
.main-portal *::before,
.main-portal *::after {
    box-sizing:border-box;
}

.main-portal a,
.main-portal a:visited {
    color:var(--text) !important;
    text-decoration:none !important;
}

.main-portal a:hover,
.main-portal a:focus {
    color:var(--text-strong) !important;
    text-decoration:none !important;
}

/* 과거 대문 구조가 캐시에 남아 있어도 화면에는 나타나지 않게 한다. */
.main-portal > .console,
.main-portal > .portal-bottom-row,
.main-portal > [data-archive-graph] {
    display:none !important;
}

/* -----------------------------------------
공통 돌출 프레임
----------------------------------------- */

.main-portal .lab-logo {
    background:var(--panel, #1d1d1d);
    border:1px solid var(--edge, #050505);
    border-radius:0;
    box-shadow:
        inset 0 1px 0 var(--highlight, #555555),
        inset -1px 0 0 var(--highlight, #555555),
        inset 1px 0 0 var(--shadow, #101010),
        inset 0 -1px 0 var(--shadow, #101010);
}

.main-portal .lab-logo {
    flex:0 0 auto;
    margin:0 0 var(--block-gap);
}

.main-portal [data-component="category-nav"] {
    flex:0 0 auto;
    display:block;
    width:100%;
    margin:0;
}

/* -----------------------------------------
로고 프레임
----------------------------------------- */

.main-portal .lab-logo {
    padding:var(--frame);
    overflow:hidden;
}

.main-portal .portal-logo-well {
    min-height:86px;
    padding:10px 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--well);
    border:0;
    box-shadow:
        inset 0 1px 0 var(--shadow),
        inset -1px 0 0 var(--shadow),
        inset 1px 0 0 var(--highlight),
        inset 0 -1px 0 var(--highlight);
    line-height:0;
}

.main-portal .portal-logo-well a,
.main-portal .portal-logo-well .mw-file-description {
    display:inline-block;
    line-height:0;
}

.main-portal .portal-logo-well img,
.main-portal .portal-logo-well .mw-file-element {
    display:block;
    width:1000px;
    max-width:144%;
    height:auto;
    filter:grayscale(1) contrast(1.04) brightness(1.02);
}

/* -----------------------------------------
카테고리 네비
----------------------------------------- */

.portal-category-nav {
    position:relative;
    width:100%;
    height:24px;
    margin:0;
    padding:0;
    overflow:hidden;
    background:var(--well, #080808);
    border:0;
    border-radius:0;
    box-shadow:none;
}

.portal-category-svg {
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}

/*
각 버튼은 SVG 안에서 독립된 사선 프레임으로 그린다.
- 외곽 1px: #050505
- 본체: #1d1d1d
- 상단/우측 inset: #555555
- 좌측/하단 inset: #101010
- 버튼 사이 배경: #080808 2px
*/
.portal-cat-edge {
    fill:#050505;
    stroke:none;
}

.portal-cat-surface {
    fill:#1d1d1d;
    stroke:none;
}

.portal-cat-inset {
    fill:none;
    stroke-width:1;
    shape-rendering:geometricPrecision;
}

.portal-cat-inset-top,
.portal-cat-inset-right {
    stroke:#555555;
}

.portal-cat-inset-bottom,
.portal-cat-inset-left {
    stroke:#101010;
}

.portal-cat-hit {
    fill:transparent;
    stroke:none;
    cursor:pointer;
}

.portal-cat-anchor:hover .portal-cat-surface,
.portal-cat-anchor:focus .portal-cat-surface {
    fill:#242424;
}

.portal-cat-anchor:active .portal-cat-surface {
    fill:#101010;
}

.portal-cat-anchor:active .portal-cat-inset-top,
.portal-cat-anchor:active .portal-cat-inset-right {
    stroke:#101010;
}

.portal-cat-anchor:active .portal-cat-inset-bottom,
.portal-cat-anchor:active .portal-cat-inset-left {
    stroke:#555555;
}

.portal-cat-label {
    fill:#e2e2e2;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    text-anchor:middle;
    dominant-baseline:middle;
    pointer-events:none;
    paint-order:stroke;
    stroke:#050505;
    stroke-width:2px;
    stroke-linejoin:round;
}

.portal-cat-anchor:hover .portal-cat-label,
.portal-cat-anchor:focus .portal-cat-label {
    fill:#ffffff;
}

.main-portal a,
.main-portal .portal-cat-surface,
.main-portal .portal-cat-inset,
.main-portal .portal-cat-label {
    transition:none !important;
}

@media screen and (max-width:820px) {
    .portal-cat-label {
        font-size:11px;
    }
}

@media screen and (max-width:620px) {
    .main-portal {
        --frame:6px;
    }
}

/* -----------------------------------------
대문 선언문 / 18px 1비트 비트맵 렌더링
----------------------------------------- */

.main-portal .main-manifesto {
    flex:1 0 auto;
    min-height:0;
    width:100%;
    padding:clamp(34px, 5vh, 64px) clamp(24px, 7vw, 112px);
    display:flex;
    align-items:center;
    justify-content:center;
}

.main-portal .main-manifesto-inner {
    width:min(660px, 100%);
    position:relative;
    top:calc(-100px + var(--manifesto-snap-y, 0px));
    left:var(--manifesto-snap-x, 0px);
    transform:none;
    margin:0 auto;
    --manifesto-optical-shift-x:0px;
    --manifesto-snap-x:0px;
    --manifesto-snap-y:0px;
    color:#d8d8d8;
    font-family:'YiSunShin', serif !important;
    font-size:17px;
    font-weight:400 !important;
    font-style:normal !important;
    font-synthesis:none;
    line-height:32px;
    letter-spacing:0;
    word-break:keep-all;
    overflow-wrap:break-word;
}

/* Theme.css의 전역 `* { font-family: inherit !important; }`보다 우선한다. */
.main-portal .main-manifesto-inner,
.main-portal .main-manifesto-inner * {
    font-family:'YiSunShin', serif !important;
    font-weight:400 !important;
    font-style:normal !important;
    font-synthesis:none !important;
}

.main-portal .main-manifesto-title {
    margin:0 0 34px;
    color:#ffffff;
    font-family:'YiSunShin', serif !important;
    font-size:36px;
    font-weight:400 !important;
    font-synthesis:none;
    line-height:36px;
    letter-spacing:4px;
    text-align:center;
}

.main-portal .main-manifesto p {
    position:relative;
    left:var(--manifesto-optical-shift-x, 0px);
    margin:0 0 20px;
    transform:none;
}

.main-portal .main-manifesto p:last-child {
    margin-bottom:0;
}

@media screen and (max-width:820px) {
    .main-portal .main-manifesto {
        padding:32px 24px;
    }

    .main-portal .main-manifesto-inner {
        font-size:16px;
        line-height:30px;
    }

    .main-portal .main-manifesto-title {
        margin-bottom:28px;
        font-size:32px;
        line-height:32px;
        letter-spacing:4px;
    }
}

@media screen and (max-width:620px) {
    .main-portal .main-manifesto {
        padding:28px 16px;
    }

    .main-portal .main-manifesto-inner {
        font-size:14px;
        line-height:26px;
    }

    .main-portal .main-manifesto-title {
        margin-bottom:24px;
        font-size:28px;
        line-height:28px;
        letter-spacing:3px;
    }
}


/* -----------------------------------------
18px 비트맵 선언문 표시 / Common.js 통합 렌더러
-----------------------------------------
원문 h2/p는 DOM에 남겨 검색·복사·접근성의 원본으로 사용한다.
아틀라스 로드와 렌더링이 성공한 뒤에만 시각적으로 숨긴다.
Canvas의 내부 크기와 CSS 크기는 항상 같은 정수 px이다.
*/
.main-portal .main-manifesto-bitmap {
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    margin:0 auto;
    padding:0;
    border:0;
    background:transparent;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    transform:none !important;
}

.main-portal .main-manifesto-inner.is-bitmap-ready > .main-manifesto-title,
.main-portal .main-manifesto-inner.is-bitmap-ready > p {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:-1px !important;
    padding:0 !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.main-portal .main-manifesto-inner[data-bitmap-state="failed"] .main-manifesto-bitmap {
    display:none !important;
}