미디어위키: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:36px;
    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;
    }
}

/* -----------------------------------------
대문 선언문 / 실제 픽셀 웹폰트 단일 구현
----------------------------------------- */

@font-face {
    font-family:'YiSunShin Pixel 18';
    src:url('/fonts/YiSunShinPixel18.woff2?v=20260712-realfont-clean-001') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:block;
}

.main-portal .main-manifesto {
    flex:1 0 auto;
    min-height:0;
    width:100%;
    margin:0;
    padding:10px 0 24px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow:visible;
}

.main-portal .main-manifesto-inner {
    position:relative !important;
    top:0 !important;
    left:0 !important;
    width:660px !important;
    min-width:660px !important;
    max-width:660px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 auto !important;
    padding:0 !important;
    overflow:visible !important;
    color:#e2e2e2 !important;
    background:transparent !important;
    transform:none !important;
}

.main-portal .main-manifesto-inner::before,
.main-portal .main-manifesto-inner::after {
    content:none !important;
    display:none !important;
    background:none !important;
}

.main-portal .main-manifesto-title {
    position:static !important;
    top:auto !important;
    left:auto !important;
    width:660px !important;
    height:57px !important;
    min-height:57px !important;
    max-height:57px !important;
    margin:0 0 14px !important;
    padding:0 0 8px !important;
    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;
    color:#e2e2e2 !important;
    -webkit-text-fill-color:#e2e2e2 !important;
    background:transparent !important;
    border:0 !important;
    border-bottom:1px solid #626262 !important;
    font-family:'YiSunShin Pixel 18' !important;
    font-size:36px !important;
    font-weight:400 !important;
    font-style:normal !important;
    font-synthesis:none !important;
    font-kerning:none !important;
    font-variant-ligatures:none !important;
    font-feature-settings:'kern' 0, 'liga' 0 !important;
    line-height:48px !important;
    letter-spacing:0 !important;
    text-align:center !important;
    text-shadow:none !important;
    transform:none !important;
    user-select:text !important;
}

.main-portal .main-manifesto-copy {
    position:static !important;
    top:auto !important;
    left:auto !important;
    width:620px !important;
    min-width:620px !important;
    max-width:620px !important;
    height:auto !important;
    margin:0 auto !important;
    padding:0 !important;
    overflow:visible !important;
    color:#e2e2e2 !important;
    -webkit-text-fill-color:#e2e2e2 !important;
    background:transparent !important;
    font-family:'YiSunShin Pixel 18' !important;
    font-size:18px !important;
    font-weight:400 !important;
    font-style:normal !important;
    font-synthesis:none !important;
    font-kerning:none !important;
    font-variant-ligatures:none !important;
    font-feature-settings:'kern' 0, 'liga' 0 !important;
    line-height:28px !important;
    letter-spacing:0 !important;
    word-break:keep-all !important;
    overflow-wrap:break-word !important;
    text-align:left !important;
    text-shadow:none !important;
    transform:none !important;
    user-select:text !important;
}

.main-portal .main-manifesto-copy,
.main-portal .main-manifesto-copy * {
    font-family:'YiSunShin Pixel 18' !important;
    font-size:18px !important;
    font-weight:400 !important;
    font-style:normal !important;
    font-synthesis:none !important;
    font-kerning:none !important;
    font-variant-ligatures:none !important;
    font-feature-settings:'kern' 0, 'liga' 0 !important;
    line-height:28px !important;
    letter-spacing:0 !important;
    color:#e2e2e2 !important;
    -webkit-text-fill-color:#e2e2e2 !important;
}

.main-portal .main-manifesto-copy p {
    position:static !important;
    top:auto !important;
    left:auto !important;
    width:620px !important;
    height:auto !important;
    margin:0 0 16px !important;
    padding:0 !important;
    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;
    white-space:normal !important;
    transform:none !important;
    user-select:text !important;
}

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

.main-portal .main-manifesto-bitmap,
.main-portal canvas.main-manifesto-bitmap {
    display:none !important;
}

@media screen and (max-width:700px) {
    .main-portal .main-manifesto {
        padding-top:10px;
        overflow-x:auto;
        justify-content:flex-start;
    }
}

/* -----------------------------------------
하단 길라잡이 버튼
-----------------------------------------
상단의 설정–프로젝트–기업 및 공동체 합산 폭을 공유한다.
사선 방향은 상단 묶음과 반대로, 넓은 변이 하단에 놓인다.
*/
.main-portal [data-component="category-guide-nav"] {
    flex:0 0 auto;
    display:block;
    width:100%;
    height:36px;
    margin:2px 0 0;
    padding:0;
    position:relative;
    z-index:2147483000 !important;
    pointer-events:auto;
}

.main-portal .portal-guide-nav {
    width:100%;
    height:36px;
    margin:0;
    background:var(--well, #080808);
}

.main-portal .portal-guide-svg {
    width:100%;
    height:36px;
}

.main-portal .portal-guide-label {
    fill:#e2e2e2;
}


/* 본문 데코가 별도 stacking context를 만들더라도 길라잡이 클릭면을 최상단에 유지한다. */
.main-portal .portal-guide-nav,
.main-portal .portal-guide-svg,
.main-portal .portal-guide-anchor {
    position:relative;
    z-index:2147483000 !important;
}

/* -----------------------------------------
대문 본문 패널 / 실제 래퍼·데코 클리핑
-----------------------------------------
구조:
로고 → 상단 버튼 → #1d1d1d 본문 프레임
                    └ #080808 우물
                       ├ 선언문
                       ├ 대문 데코
                       └ 길라잡이

외곽 프레임과 내부 우물 모두 paint를 잘라낸다.
따라서 데코는 저장된 좌표와 z-index에 관계없이
#1d1d1d 프레임의 경계를 넘어 보일 수 없다.
*/
.main-portal .main-body-panel {
    flex:1 0 auto;
    min-height:0;
    width:100%;
    margin:2px 0 0;
    padding:9px;
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    isolation:isolate;
    background:#1d1d1d;
    border:1px solid #050505;
    border-radius:0;
    box-shadow:
        inset 0 1px 0 #555555,
        inset -1px 0 0 #555555,
        inset 1px 0 0 #101010,
        inset 0 -1px 0 #101010;
}

.main-portal .main-body-well {
    flex:1 0 auto;
    min-height:0;
    width:100%;
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    isolation:isolate;
    background:#080808;
    border:0;
    box-shadow:
        inset 0 1px 0 #101010,
        inset -1px 0 0 #101010,
        inset 1px 0 0 #555555,
        inset 0 -1px 0 #555555;
}

/* 기존 선언문 좌표와 폭은 유지하되 새 우물 안의 흐름 요소로 둔다. */
.main-portal .main-body-well > .main-manifesto {
    flex:1 0 auto;
    min-height:0;
    width:100%;
    margin:0 !important;
    /*
    길라잡이 하단에 추가한 3px을 전체 높이에 더하지 않는다.
    기존 하단 여유 24px 안에서 3px을 넘겨 전체 패널 높이를 보존한다.
    */
    padding:10px 0 21px !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
    z-index:1;
}

/*
대문 장식 렌더러가 일반 장식을 이 우물의 직접 자식으로 넣는다.
position:absolute를 보장하고, 우물 overflow:hidden으로 절단한다.
*/
.main-portal .main-body-well > .wiki-decoration,
.main-portal .main-body-well > [data-wiki-decoration-rendered="1"] {
    position:absolute !important;
    margin:0 !important;
    max-width:none !important;
    max-height:none !important;
}

/* 길라잡이는 우물 최하단의 정상 흐름 요소다. */
.main-portal .main-body-well > [data-component="category-guide-nav"] {
    flex:0 0 36px;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:36px !important;
    /*
    위쪽은 2px.
    아래쪽은 우물의 1px inset을 제외하고 순수 #080808이 2px 보이도록
    CSS margin-bottom을 3px로 둔다.
    */
    margin:2px 0 3px !important;
    padding:0 !important;
    position:relative !important;
    overflow:visible !important;
    z-index:2147483000 !important;
    pointer-events:auto !important;
}

.main-portal .main-body-well .portal-guide-nav,
.main-portal .main-body-well .portal-guide-svg,
.main-portal .main-body-well .portal-guide-anchor {
    position:relative;
    z-index:2147483000 !important;
}

/* 실패했던 display:contents 우회 구조는 사용하지 않는다. */
.main-portal > .main-body-panel,
.main-portal .main-body-well {
    box-sizing:border-box;
}

@media screen and (max-width:700px) {
    .main-portal .main-body-panel {
        min-width:660px;
    }
}

/* -----------------------------------------
대문 높이 체인 / 외부 스크롤 완전 제거
-----------------------------------------
Layout.css의 .mw-parser-output은 일반 문서를 위해 overflow-y:auto이다.
대문에서는 전체 패널이 남은 높이를 정확히 나눠 써야 하므로 예외 처리한다.

핵심:
- 바깥 스크롤 박스 비활성화
- 높이 전달 체인을 100%로 고정
- 각 세로 flex 구간을 flex:1 1 0으로 축소 가능하게 변경
- min-height:0으로 min-content 높이 강제 확장을 차단
*/
body.action-view.clbi-main-page .liberty-content-main,
body.action-view.clbi-main-page .liberty-content-main > #mw-content-text,
body.action-view.clbi-main-page .liberty-content-main > .mw-body-content,
body.action-view.clbi-main-page .liberty-content-main #mw-content-text,
body.action-view.clbi-main-page .liberty-content-main .mw-body-content,
body.action-view.clbi-main-page .liberty-content-main .mw-parser-output {
    min-height:0 !important;
    overflow:hidden !important;
}

body.action-view.clbi-main-page .liberty-content-main .mw-parser-output {
    flex:1 1 0 !important;
    height:100% !important;
    max-height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    overflow-y:hidden !important;
    overflow-x:hidden !important;
    scrollbar-width:none !important;
}

body.action-view.clbi-main-page .liberty-content-main .mw-parser-output::-webkit-scrollbar {
    display:none !important;
    width:0 !important;
    height:0 !important;
}

body.action-view.clbi-main-page .liberty-content-main .mw-parser-output > .main-portal {
    flex:1 1 0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden !important;
}

body.action-view.clbi-main-page .main-portal {
    flex:1 1 0 !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden !important;
}

body.action-view.clbi-main-page .main-portal .main-body-panel {
    flex:1 1 0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
}

body.action-view.clbi-main-page .main-portal .main-body-well {
    flex:1 1 0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
}

body.action-view.clbi-main-page .main-portal .main-body-well > .main-manifesto {
    flex:1 1 0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
}

/* 길라잡이는 고정 36px이며 위 2px·아래 시각 2px 간격을 유지한다. */
body.action-view.clbi-main-page
.main-portal
.main-body-well > [data-component="category-guide-nav"] {
    flex:0 0 36px !important;
}

/* -----------------------------------------
버튼 프레임 / 총 높이 36px 유지
-----------------------------------------
상단:
- 외곽 프레임 포함 총 36px
- 실제 한 줄 SVG 버튼 24px
- 좌우 9px은 본문 패널의 내부 우물과 정렬

하단:
- 본문 패널의 마지막 36px 자체가 하단 프레임
- 길라잡이 실제 버튼은 24px
- 넓은 하단이 패널 최외곽 하단선에 열려 붙는다
- 별도의 아래 간격이나 추가 높이를 만들지 않는다
*/

/* 상단 버튼 묶음 외곽 프레임: border-box 총 36px */
.main-portal > [data-component="category-nav"] {
    flex:0 0 36px !important;
    display:block !important;
    width:100% !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    margin:0 !important;
    padding:5px 9px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    position:relative !important;
    background:#1d1d1d !important;
    border:1px solid #050505 !important;
    border-radius:0 !important;
    box-shadow:
        inset 0 1px 0 #555555,
        inset -1px 0 0 #555555,
        inset 1px 0 0 #101010,
        inset 0 -1px 0 #101010 !important;
}

/* 36px 프레임 안의 실제 버튼은 표준 한 줄 높이 24px */
.main-portal > [data-component="category-nav"] > .portal-category-nav {
    width:100% !important;
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#080808 !important;
}

.main-portal > [data-component="category-nav"] .portal-category-svg {
    width:100% !important;
    height:24px !important;
}

/*
본문 패널의 총 높이는 그대로 유지한다.
기존 하단 9px 프레임 + 우물 내부 36px 길라잡이를 없애고,
패널 마지막 36px 하나로 통합한다.

border-bottom 1px + padding-bottom 35px = 총 하단 프레임 36px.
*/
body.action-view.clbi-main-page .main-portal .main-body-panel,
.main-portal .main-body-panel {
    padding:9px 9px 35px !important;
}

/* 우물에는 본문과 데코만 남는다. */
.main-portal .main-body-well {
    overflow:hidden !important;
}

/* 길라잡이 mount는 패널 하단 프레임 36px 전체를 점유한다. */
.main-portal .main-body-panel > [data-component="category-guide-nav"] {
    display:block !important;
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    bottom:-1px !important;
    width:auto !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:2147483000 !important;
    pointer-events:auto !important;
    background:transparent !important;
}

/*
실제 사선 버튼은 24px이며 하단에 붙는다.
위쪽 12px은 별도로 추가된 공간이 아니라 기존 36px 하단 프레임의 면이다.
*/
.main-portal .main-body-panel > [data-component="category-guide-nav"]
.portal-guide-nav {
    display:block !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    z-index:2147483000 !important;
}

.main-portal .main-body-panel > [data-component="category-guide-nav"]
.portal-guide-svg {
    width:100% !important;
    height:24px !important;
    overflow:visible !important;
}

/* 열린 하단에는 별도의 버튼 그림자 마감선을 만들지 않는다. */
.main-portal .portal-guide-nav.is-panel-fused .portal-cat-inset-bottom {
    display:none !important;
}

/* 이전 우물 내부 길라잡이 규칙은 더 이상 높이나 간격을 만들지 않는다. */
.main-portal .main-body-well > [data-component="category-guide-nav"] {
    flex:none !important;
    margin:0 !important;
}

/* 높이 체인에서도 길라잡이는 가변 우물의 자식이 아니다. */
body.action-view.clbi-main-page
.main-portal
.main-body-well > [data-component="category-guide-nav"] {
    flex:none !important;
}

@media screen and (max-width:700px) {
    .main-portal > [data-component="category-nav"],
    .main-portal .main-body-panel {
        min-width:660px !important;
    }
}