미디어위키:MainPage.css

/* =========================================
COASTLINE: BLACK ICE - MainPage
대문 전용 v3 스타일
========================================= */

/*
책임 범위
-----------------------------------------
- 대문 본문 .main-portal 내부만 담당한다.
- 사이트 공통 셸은 Layout.css가 담당한다.
- 카테고리 네비의 SVG 구조는 CategoryNav.js가 생성한다.
- 대문에서 제거된 보조 모듈의 레거시 스타일은 이 파일에 두지 않는다.
*/

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

.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 .lab-logo,
.main-portal .console,
.portal-category-nav {
    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,
.main-portal [data-component="category-nav"],
.main-portal .console {
    margin:0 0 var(--block-gap);
}

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

.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);
}

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

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

.portal-category-nav {
    position:relative;
    width:100%;
    height:24px;
    margin:0;
    padding:0;
    overflow:hidden;
}

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

.portal-cat-shape {
    fill:transparent;
    stroke:none;
    pointer-events:all;
}

.portal-cat-anchor:hover .portal-cat-shape {
    fill:rgba(255,255,255,0.035);
}

.portal-cat-anchor:active .portal-cat-shape {
    fill:rgba(0,0,0,0.18);
}

.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 {
    fill:#ffffff;
}

.portal-cat-divider {
    stroke:#050505;
    stroke-width:1;
    shape-rendering:crispEdges;
    vector-effect:non-scaling-stroke;
    pointer-events:none;
}

/* -----------------------------------------
메인 콘솔
----------------------------------------- */

.main-portal .console {
    width:100%;
    padding:0 var(--frame) var(--frame);
    overflow:hidden;
}

.main-portal .titlebar,
.main-portal .screen-title {
    height:34px;
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0;
    overflow:hidden;
    background:transparent;
    border:0;
    box-shadow:none;
    color:var(--text-strong);
    font-size:12px;
    font-weight:700;
    line-height:34px;
    white-space:nowrap;
}

.main-portal .titlebar > span,
.main-portal .screen-title > span {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}

.main-portal .titlebar > span:last-child,
.main-portal .screen-title > span:last-child {
    flex:0 0 auto;
    color:var(--meta);
    font-size:11px;
}

.main-portal .console-body {
    padding:3px;
    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);
}

.main-portal .console-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:var(--gap);
    align-items:stretch;
}

.main-portal .main-screen,
.main-portal .archive-screen {
    min-width:0;
    padding:var(--frame);
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--edge);
    box-shadow:
        inset 0 1px 0 var(--highlight),
        inset -1px 0 0 var(--highlight),
        inset 1px 0 0 var(--shadow),
        inset 0 -1px 0 var(--shadow);
}

.main-portal .main-screen {
    display:grid;
    grid-template-rows:auto auto;
    gap:var(--gap);
}

.main-portal .archive-screen {
    display:flex;
    flex-direction:column;
    padding-top:0;
}

/* -----------------------------------------
이미지 피드
----------------------------------------- */

.main-portal .image-feed {
    position:relative;
    width:100%;
    height:260px;
    min-height:260px;
    overflow:hidden;
    isolation:isolate;
    background:#030303;
    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);
}

.main-portal .feed-layer {
    position:absolute;
    inset:-12px;
    z-index:1;
    opacity:0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    filter:brightness(0.78) contrast(1.12) saturate(0.78) grayscale(0.16);
    transform:translate(0,0) scale(1.06);
    transform-origin:center;
    will-change:opacity, transform;
    animation-duration:24s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

.main-portal .feed-bg-001 { background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-001.png'); }
.main-portal .feed-bg-002 { background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-002.png'); }
.main-portal .feed-bg-003 { background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-003.png'); }
.main-portal .feed-bg-004 { background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-004.png'); }

.main-portal .feed-layer-1 { animation-name:image-feed-drift-left; animation-delay:0s; }
.main-portal .feed-layer-2 { animation-name:image-feed-drift-right; animation-delay:6s; }
.main-portal .feed-layer-3 { animation-name:image-feed-drift-left; animation-delay:12s; }
.main-portal .feed-layer-4 { animation-name:image-feed-drift-right; animation-delay:18s; }

@keyframes image-feed-drift-left {
    0% { opacity:0; transform:translate(0,0) scale(1.06); }
    4.166% { opacity:1; transform:translate(0,0) scale(1.06); }
    25% { opacity:1; transform:translate(-22px,14px) scale(1.075); }
    29.166% { opacity:0; transform:translate(-26px,16px) scale(1.078); }
    100% { opacity:0; transform:translate(0,0) scale(1.06); }
}

@keyframes image-feed-drift-right {
    0% { opacity:0; transform:translate(0,0) scale(1.06); }
    4.166% { opacity:1; transform:translate(0,0) scale(1.06); }
    25% { opacity:1; transform:translate(22px,14px) scale(1.075); }
    29.166% { opacity:0; transform:translate(26px,16px) scale(1.078); }
    100% { opacity:0; transform:translate(0,0) scale(1.06); }
}

.main-portal .image-feed::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.18), transparent 22%, transparent 74%, rgba(0,0,0,0.30)),
        linear-gradient(to right, rgba(0,0,0,0.22), transparent 10%, transparent 90%, rgba(0,0,0,0.22));
}

.main-portal .image-feed::after {
    content:"";
    position:absolute;
    inset:-40px 0;
    z-index:6;
    pointer-events:none;
    opacity:0.18;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.09) 0,
            rgba(255,255,255,0.09) 1px,
            transparent 2px,
            transparent 5px
        );
    mix-blend-mode:screen;
}

.main-portal .feed-caption {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:8;
    height:24px;
    padding:0 8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    overflow:hidden;
    background:rgba(16,16,16,0.94);
    border-top:1px solid var(--edge);
    color:var(--text);
    font-size:11px;
    font-weight:700;
    line-height:23px;
}

.main-portal .feed-caption span:first-child {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.main-portal .feed-caption span:last-child {
    flex:0 0 auto;
    color:var(--meta);
}

/* -----------------------------------------
선언문
----------------------------------------- */

.main-portal .statement-plate {
    padding:12px 16px;
    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);
}

.main-portal .statement-plate h2 {
    margin:0 0 8px !important;
    padding:0 0 7px !important;
    border:0 !important;
    border-bottom:1px solid var(--item) !important;
    color:var(--text-strong) !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:20px !important;
    text-align:center !important;
}

.main-portal .statement-plate p {
    max-width:840px;
    margin:0 auto 8px;
    color:var(--text);
    font-size:12px;
    font-weight:400;
    line-height:18px;
    text-align:center;
    word-break:keep-all;
}

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

/* -----------------------------------------
ARCHIVE STATUS
----------------------------------------- */

.main-portal .archive-screen .screen-title {
    flex:0 0 34px;
}

.main-portal .instrument-body {
    flex:1 1 auto;
    min-height:0;
    padding:3px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-content:start;
    gap:var(--gap);
    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);
}

.main-portal .instrument-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--gap);
}

.main-portal .gauge,
.main-portal .instrument-line {
    background:var(--item);
    border:1px solid var(--edge);
    box-shadow:inset 0 1px 0 var(--panel);
}

.main-portal .gauge {
    height:72px;
    padding:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-align:center;
}

.main-portal .gauge b {
    display:block;
    color:var(--text-strong);
    font-family:Consolas, Monaco, monospace !important;
    font-size:20px;
    font-weight:700;
    line-height:24px;
}

.main-portal .gauge span {
    display:block;
    margin-top:4px;
    color:var(--meta);
    font-size:10px;
    line-height:12px;
    white-space:nowrap;
}

.main-portal .instrument-lines {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:var(--gap);
}

.main-portal .instrument-line {
    height:24px;
    min-height:24px;
    padding:0 8px;
    display:grid;
    grid-template-columns:76px minmax(0,1fr);
    align-items:center;
    gap:8px;
    overflow:hidden;
    font-size:11px;
    line-height:22px;
}

.main-portal .instrument-label {
    color:var(--meta);
    white-space:nowrap;
}

.main-portal .instrument-value {
    min-width:0;
    overflow:hidden;
    color:var(--text);
    text-align:right;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.main-portal .gauge:hover,
.main-portal .instrument-line:hover {
    color:var(--text-strong);
}

.main-portal .instrument-line:hover .instrument-value {
    color:var(--text-strong);
}

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

@media screen and (max-width:1100px) {
    .main-portal .console-grid {
        grid-template-columns:minmax(0,1fr);
    }

    .main-portal .archive-screen {
        min-height:190px;
    }
}

@media screen and (max-width:820px) {

    .main-portal .image-feed {
        height:220px;
        min-height:220px;
    }

    .portal-cat-label {
        font-size:11px;
    }
}

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

    .main-portal .statement-plate {
        padding:10px 12px;
    }

    .main-portal .instrument-grid {
        grid-template-columns:minmax(0,1fr);
    }
}

/* 아날로그 UI는 상태 변화를 즉시 보여준다. */
.main-portal a,
.main-portal button,
.main-portal .portal-cat-shape,
.main-portal .portal-cat-label,
.main-portal .gauge,
.main-portal .instrument-line {
    transition:none !important;
}
/* =========================================
대문 우측 하단 프로젝트 도크
- 메인 콘솔과 분리된 대문 본문 직속 프레임이다.
- 제목은 왼쪽 세로 문자열로 두고 버튼은 오른쪽에 쌓는다.
- 제목부는 34px 칸에서 왼쪽 inset 1px을 제외한 순수 #1d1d1d 면 33px을 사용한다.
- 제목과 우물 사이의 grid gap은 두지 않아 #1d1d1d 폭이 늘어나지 않게 한다.
========================================= */

.main-portal {
    position:relative;
    min-height:100%;
}

.main-portal .portal-project-dock {
    position:absolute;
    right:0;
    bottom:0;
    width:415px;
    padding:var(--frame) var(--frame) var(--frame) 0;
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:0;
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--edge);
    box-shadow:
        inset 0 1px 0 var(--highlight),
        inset -1px 0 0 var(--highlight),
        inset 1px 0 0 var(--shadow),
        inset 0 -1px 0 var(--shadow);
}

.main-portal .portal-project-title {
    grid-column:1;
    grid-row:1;
    width:34px;
    min-width:34px;
    max-width:34px;
    position:relative;
    display:block;
    padding:0;
    background:transparent;
    color:var(--text-strong);
    font-size:12px;
    font-weight:700;
    line-height:12px;
    text-align:center;
}

.main-portal .portal-project-title-stack {
    position:absolute;
    left:50%;
    top:50%;
    width:12px;
    height:max-content;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    transform:translate(-50%,-50%) translateX(1px);
}

.main-portal .portal-project-title-stack > span {
    width:12px;
    height:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:12px;
    text-align:center;
}

.main-portal .portal-project-body {
    grid-column:2;
    grid-row:1;
    min-width:0;
    padding:3px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:var(--gap);
    background:var(--well);
    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);
}

.main-portal .portal-project-button,
.main-portal .portal-project-button > a {
    width:100%;
    min-width:0;
}

.main-portal .portal-project-button > a {
    height:104px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--edge);
    box-shadow:
        inset 0 1px 0 var(--highlight),
        inset -1px 0 0 var(--highlight),
        inset 1px 0 0 var(--shadow),
        inset 0 -1px 0 var(--shadow);
    color:var(--text) !important;
    font-size:14px;
    font-weight:700;
    line-height:102px;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}

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

.main-portal .portal-project-button > a:active {
    color:var(--text) !important;
    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);
}

@media screen and (max-width:620px) {
    .main-portal .portal-project-dock {
        position:static;
        width:100%;
        margin-top:var(--block-gap);
    }
}