미디어위키:MainPage.css

/* =========================================
COASTLINE: BLACK ICE - MainPage
대문 전용 스타일
Full portal layout + SVG category navigation
========================================= */

/*
설계 목적
-----------------------------------------
이 파일은 대문 전용 화면 전체를 담당한다.

이전 Test.css는 실험용이었다.
그 안에는 대문 레이아웃, 공지, 로고, 이미지 피드, 방명록 더미,
프로젝트 트래커, 상태 패널, 푸터, 카테고리 네비 실험 코드가 섞여 있었다.

실사용 단계에서는 Test.css를 import하지 않고,
대문에서 필요한 요소를 이 파일로 옮긴다.

중요:
- 이 파일의 스코프는 .main-portal이다.
- .stylelab은 테스트용 이름이므로 실사용 본문에서 쓰지 않는다.
- 카테고리 네비는 CategoryNav.js가 SVG DOM을 생성하고, 이 파일은 시각 스타일만 담당한다.
- 사선 버튼처럼 클릭/호버 영역과 시각 형태가 일치해야 하는 요소는 SVG를 사용한다.
*/

/* -----------------------------------------
0. Main portal scope
----------------------------------------- */

/*
main-portal은 더 이상 대문 전체의 외곽 우물 역할을 하지 않는다.
현재 외곽 프레임과 내부 우물은 Layout.css의 .liberty-content-main / .mw-parser-output이 담당한다.
따라서 이 래퍼는 변수와 스코프만 제공하고, 실제 첫 시각 요소는 notice-rail, lab-logo,
category-nav, console 같은 대문 모듈이 바로 담당한다.
*/

.main-portal {
--surface-page:#070707;
--surface-frame:#101010;
--surface-frame-soft:#141414;
--surface-title:#1d1d1d;
--surface-title-hover:#252525;
--surface-well:#080808;
--surface-screen:#060606;
--surface-row:#121212;
--surface-row-alt:#151515;
--surface-inset:#070707;

--edge-top:#555555;
--edge-side:#2b2b2b;
--edge-bottom:#050505;
--edge-soft:#202020;
--edge-mid:#333333;
--edge-weak:#181818;

--text-main:#e2e2e2;
--text-soft:#c8c8c8;
--text-dim:#8a8a8a;
--text-faint:#626262;

--wip-yellow:#f2c300;
--wip-black:#050505;

--space-block:8px;
--space-inner:6px;
--space-tight:4px;
--pad-panel:8px;

--title-h:24px;
--screen-title-h:22px;
--nav-h:30px;
--ticker-h:22px;
--row-h:23px;
--gauge-h:48px;

width:100%;
margin:0;
padding:0;
box-sizing:border-box;
background:transparent;
color:var(--text-main);
font-size:11px;
line-height:1.5;
}

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

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

.main-portal a:hover {
color:#ffffff !important;
text-decoration:none !important;
}

/* -----------------------------------------
1. Frame system
----------------------------------------- */

.main-portal .notice-rail,
.main-portal .lab-logo,
.main-portal .console,
.main-portal .panel,
.main-portal .instrument-panel,
.main-portal .ticker {
border:1px solid;
border-color:
var(--edge-top)
var(--edge-side)
var(--edge-bottom)
var(--edge-side);
background:var(--surface-frame);
border-radius:0;
box-shadow:none;
outline:none;
overflow:hidden;
}

.main-portal .titlebar {
position:relative;
height:var(--title-h);
min-height:var(--title-h);
padding:0 var(--pad-panel);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-block);
background:var(--surface-title);
border-bottom:1px solid var(--edge-bottom);
color:#f0f0f0;
font-size:10px;
font-weight:700;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-shadow:1px 1px 0 #000;
}

.main-portal .titlebar > span {
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}

.main-portal .titlebar > span:first-child {
flex:1 1 auto;
}

.main-portal .titlebar > span:last-child {
flex:0 0 auto;
color:#a8a8a8;
font-weight:700;
text-align:right;
}

/* -----------------------------------------
2. Notice rail
----------------------------------------- */

.main-portal .notice-rail {
width:100%;
margin:0 0 var(--space-block);
background:#101010;
border-color:
#606060
var(--edge-side)
var(--edge-bottom)
var(--edge-side);
}

.main-portal .notice-line {
position:relative;
display:grid;
grid-template-columns:72px 96px minmax(0,1fr) 48px;
align-items:center;
gap:7px;
min-height:30px;
padding:0 8px;
border-bottom:1px solid #050505;
background:#141414;
font-size:12px;
line-height:1.25;
color:#dcdcdc;
overflow:hidden;
}

.main-portal .notice-line:last-child {
border-bottom:none;
}

.main-portal .notice-line > * {
position:relative;
z-index:2;
}

.main-portal .notice-line:hover {
background:#1c1c1c;
color:#ffffff;
}

.main-portal .notice-line.is-alert {
background:
repeating-linear-gradient(
45deg,
var(--wip-yellow) 0 9px,
var(--wip-yellow) 9px 10px,
var(--wip-black) 10px 19px,
var(--wip-black) 19px 20px
);
}

.main-portal .notice-line.is-alert::before {
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:rgba(0,0,0,0.42);
}

.main-portal .notice-line.is-alert:hover::before {
background:rgba(0,0,0,0.34);
}

.main-portal .notice-line.is-notice {
background:#141414;
}

.main-portal .notice-line.is-notice:hover {
background:#1c1c1c;
}

.main-portal .notice-badge {
display:inline-flex;
align-items:center;
justify-content:center;
height:20px;
padding:0 7px;
border:1px solid #444444;
background:#0b0b0b;
color:#d8d8d8;
font-size:10px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
}

.main-portal .notice-line.is-alert .notice-badge,
.main-portal .notice-line.is-notice .notice-badge {
border-color:#505050;
background:#101010;
color:#eeeeee;
}

.main-portal .notice-date {
color:#9d9d9d;
white-space:nowrap;
font-size:10px;
font-family:Consolas, Monaco, monospace !important;
}

.main-portal .notice-text {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#e0e0e0;
font-size:12px;
font-weight:700;
}

.main-portal .notice-line.is-alert .notice-badge,
.main-portal .notice-line.is-alert .notice-date,
.main-portal .notice-line.is-alert .notice-text,
.main-portal .notice-line.is-alert .notice-action {
text-shadow:
-1px 0 0 #000,
1px 0 0 #000,
0 -1px 0 #000,
0 1px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

.main-portal .notice-line:hover .notice-text {
color:#ffffff;
}

.main-portal .notice-action {
justify-self:end;
display:inline-flex;
align-items:center;
justify-content:center;
height:20px;
min-width:38px;
padding:0 5px;
border:1px solid #3a3a3a;
background:#0b0b0b;
color:#c8c8c8;
font-size:10px;
font-weight:700;
white-space:nowrap;
line-height:1;
}

.main-portal .notice-line:hover .notice-action {
border-color:#606060;
background:#181818;
color:#ffffff;
}

/* -----------------------------------------
3. Top logo
----------------------------------------- */

.main-portal .lab-logo {
width:100%;
height:auto;
margin:0 0 var(--space-block);
padding:10px 0 8px;
text-align:center;
line-height:0;
background:#0b0b0b;
}

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

.main-portal .lab-logo img,
.main-portal .lab-logo .mw-file-element {
width:760px;
max-width:90%;
height:auto;
filter:
grayscale(1)
contrast(1.04)
brightness(1.02);
}

/* -----------------------------------------
4. Category navigation mount
----------------------------------------- */

.main-portal [data-component="category-nav"] {
display:block;
width:100%;
margin:0 0 var(--space-block);
}

/* -----------------------------------------
5. Category navigation - SVG version
----------------------------------------- */

/*
SVG 방식에서는 각 항목이 polygon이다.
보이는 면, hover 면, click 면, 검은 구분선이 같은 SVG 좌표계를 사용한다.

CSS는 색상, 호버, 텍스트 스타일, 외곽 표면만 담당한다.
버튼 폭과 사선 좌표는 CategoryNav.js가 계산한다.
*/

.portal-category-nav {
position:relative;
width:100%;
height:var(--nav-h);
margin:0;
padding:0;
overflow:hidden;

background:var(--surface-frame-soft);
border:1px solid;
border-color:
var(--edge-top)
var(--edge-side)
var(--edge-bottom)
var(--edge-side);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.055),
inset 0 -1px 0 rgba(0,0,0,0.72);
}

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

.portal-cat-label {
fill:var(--text-main);
font-size:10px;
font-weight:700;
font-family:inherit;
text-anchor:middle;
dominant-baseline:middle;
pointer-events:none;
paint-order:stroke;
stroke:#000000;
stroke-width:2px;
stroke-linejoin:round;
}

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

.portal-cat-project-label {
font-size:11px;
letter-spacing:0.2px;
}

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

/* -----------------------------------------
6. Main console
----------------------------------------- */

.main-portal .console {
width:100%;
margin:0 0 var(--space-block);
padding:0;
}

.main-portal .console-body {
padding:var(--space-inner);
background:var(--surface-frame);
}

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

.main-portal .main-screen,
.main-portal .side-screen {
position:relative;
min-width:0;
height:100%;
overflow:hidden;
border:1px solid var(--edge-soft);
background:var(--surface-screen);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.018),
inset 0 0 18px rgba(0,0,0,0.70);
}

.main-portal .main-screen::before,
.main-portal .side-screen::before {
content:"";
position:absolute;
inset:0;
z-index:6;
pointer-events:none;
background:
radial-gradient(
ellipse at 50% 42%,
rgba(255,255,255,0.030) 0%,
transparent 42%
),
linear-gradient(
to bottom,
rgba(255,255,255,0.030) 0%,
transparent 24%,
rgba(0,0,0,0.16) 100%
);
}

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

.main-portal .main-screen > *,
.main-portal .side-screen > * {
position:relative;
z-index:3;
}

.main-portal .main-screen {
min-height:392px;
padding:var(--pad-panel);
display:flex;
flex-direction:column;
justify-content:flex-start;
}

.main-portal .side-screen {
padding:var(--pad-panel);
display:flex;
flex-direction:column;
}

/* -----------------------------------------
7. Image feed
----------------------------------------- */

.main-portal .image-feed {
position:relative;
width:100%;
height:240px;
min-height:240px;
overflow:hidden;
border:1px solid var(--edge-soft);
background:#030303;
isolation:isolate;
}

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

.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) 0%,
transparent 22%,
transparent 74%,
rgba(0,0,0,0.30) 100%
),
linear-gradient(
to right,
rgba(0,0,0,0.22) 0%,
transparent 10%,
transparent 90%,
rgba(0,0,0,0.22) 100%
);
}

.main-portal .image-feed::after {
content:"";
position:absolute;
inset:-40px 0;
z-index:6;
pointer-events:none;
opacity:0.20;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.090) 0px,
rgba(255,255,255,0.090) 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:22px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
border-top:1px solid rgba(255,255,255,0.09);
background:rgba(5,5,5,0.86);
color:#cfcfcf;
font-size:10px;
line-height:22px;
text-shadow:1px 1px 0 #000;
}

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

/* -----------------------------------------
8. Statement plate
----------------------------------------- */

.main-portal .statement-plate {
margin:var(--space-inner) 0 0;
padding:13px 18px 12px;
border:1px solid var(--edge-soft);
background:#080808;
}

.main-portal .statement-plate h2 {
margin:0 0 10px !important;
padding:0 0 8px !important;
border-bottom:1px solid var(--edge-soft) !important;
color:#f4f4f4 !important;
font-size:20px !important;
line-height:1.25 !important;
text-align:center !important;
text-shadow:
1px 1px 0 #000,
0 0 4px rgba(255,255,255,0.10) !important;
}

.main-portal .statement-plate p {
max-width:820px;
margin:0 auto 9px;
color:#d8d8d8;
font-size:12px;
line-height:1.68;
text-align:center;
text-shadow:1px 1px 0 #000;
}

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

/* -----------------------------------------
9. Guestbook preview
----------------------------------------- */

.main-portal .screen-title {
height:var(--screen-title-h);
min-height:var(--screen-title-h);
margin:0 0 var(--space-inner);
padding:0 7px;
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
border:1px solid var(--edge-soft);
background:#151515;
color:#f0f0f0;
font-size:10px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
}

.main-portal .screen-title span:last-child {
color:var(--text-dim);
font-size:9px;
}

.main-portal .guestbook-device {
flex:1 1 auto;
min-height:0;
display:flex;
flex-direction:column;
gap:var(--space-inner);
}

.main-portal .guestbook-messages {
flex:1 1 auto;
min-height:0;
border-top:1px solid var(--edge-soft);
border-bottom:1px solid var(--edge-soft);
overflow:hidden;
}

.main-portal .guestbook-message {
padding:6px 2px;
border-bottom:1px solid var(--edge-soft);
}

.main-portal .guestbook-message:last-child {
border-bottom:none;
}

.main-portal .guestbook-message:hover {
background:#111111;
}

.main-portal .guestbook-message-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
margin-bottom:3px;
font-size:9px;
line-height:1.2;
}

.main-portal .guestbook-name {
color:#eeeeee;
font-weight:700;
white-space:nowrap;
}

.main-portal .guestbook-time {
color:var(--text-dim);
white-space:nowrap;
}

.main-portal .guestbook-text {
color:var(--text-soft);
font-size:10px;
line-height:1.45;
word-break:keep-all;
}

.main-portal .guestbook-form {
display:grid;
grid-template-columns:minmax(0,1fr) 48px;
gap:var(--space-tight);
}

.main-portal .guestbook-input {
height:24px;
padding:0 7px;
display:flex;
align-items:center;
border:1px solid var(--edge-soft);
background:#070707;
color:var(--text-faint);
font-size:10px;
line-height:1;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

.main-portal .guestbook-input:hover {
background:#0c0c0c;
color:#8f8f8f;
}

.main-portal .guestbook-submit {
height:24px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--edge-soft);
background:#161616;
color:var(--text-soft);
font-size:9px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
}

.main-portal .guestbook-submit:hover {
background:#222222;
color:#ffffff;
}

/* -----------------------------------------
10. Ticker
----------------------------------------- */

.main-portal .ticker {
height:var(--ticker-h);
margin:0 0 var(--space-inner);
padding:0 var(--pad-panel);
color:#bdbdbd;
background:#171717;
font-size:10px;
line-height:var(--ticker-h);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}

/* -----------------------------------------
11. Module grid
----------------------------------------- */

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

.main-portal .panel,
.main-portal .instrument-panel {
min-width:0;
height:100%;
display:flex;
flex-direction:column;
}

.main-portal .panel-body,
.main-portal .instrument-body {
flex:1 1 auto;
min-height:0;
padding:var(--pad-panel);
background:var(--surface-well);
}

/* -----------------------------------------
12. Record modules
----------------------------------------- */

.main-portal .record-list {
margin:0 !important;
padding:0 !important;
list-style:none !important;
}

.main-portal .record-list li {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:var(--space-block);
height:var(--row-h);
min-height:var(--row-h);
margin:0;
padding:0 2px;
border-bottom:1px solid var(--edge-soft);
color:var(--text-soft);
line-height:1.25;
}

.main-portal .record-list li:first-child {
border-top:1px solid var(--edge-soft);
}

.main-portal .record-list li:hover {
background:#151515;
color:#ffffff;
}

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

.main-portal .meta {
color:var(--text-dim);
white-space:nowrap;
font-size:9px;
line-height:1;
}

.main-portal .record-list li:hover .meta {
color:#c0c0c0;
}

/* -----------------------------------------
13. Status tags
----------------------------------------- */

.main-portal .status-tag {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:34px;
height:16px;
padding:0 4px;
border:1px solid #303030;
background:#161616;
color:var(--text-soft);
font-size:9px;
text-align:center;
line-height:1;
}

.main-portal .status-tag.is-progress {
border-color:#6d5b2c;
background:#19170f;
}

.main-portal .status-tag.is-review {
border-color:#36515d;
background:#10171a;
}

.main-portal .status-tag.is-wait {
border-color:#484848;
background:#151515;
}

.main-portal .status-tag.is-done {
border-color:#3d5c38;
background:#111811;
}

.main-portal .status-tag.is-alert {
border-color:#6a3933;
background:#1b1110;
}

/* -----------------------------------------
14. Team work module
----------------------------------------- */

.main-portal .team-panel .panel-body {
position:relative;
padding-left:15px;
}

.main-portal .team-panel .panel-body::before {
content:"";
position:absolute;
left:6px;
top:8px;
bottom:8px;
width:4px;
pointer-events:none;
background:
repeating-linear-gradient(
45deg,
var(--wip-yellow) 0 4px,
var(--wip-yellow) 4px 5px,
var(--wip-black) 5px 9px,
var(--wip-black) 9px 10px
);
opacity:0.95;
}

.main-portal .team-panel .titlebar > span:last-child {
color:#c6c6c6;
}

/* -----------------------------------------
15. Status instrument
----------------------------------------- */

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

.main-portal .gauge {
height:var(--gauge-h);
min-width:0;
padding:6px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border:1px solid var(--edge-soft);
background:var(--surface-inset);
text-align:center;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.55);
}

.main-portal .gauge:hover {
background:#0d0d0d;
}

.main-portal .gauge b {
display:block;
color:#f0f0f0;
font-family:Consolas, Monaco, monospace !important;
font-size:18px;
line-height:1;
text-shadow:1px 1px 0 #000;
}

.main-portal .gauge span {
display:block;
margin-top:5px;
color:var(--text-dim);
font-size:9px;
line-height:1;
}

.main-portal .instrument-lines {
border-top:1px solid var(--edge-soft);
border-bottom:1px solid var(--edge-soft);
}

.main-portal .instrument-line {
display:grid;
grid-template-columns:82px minmax(0,1fr);
align-items:center;
gap:6px;
height:22px;
min-height:22px;
padding:0 2px;
border-bottom:1px solid var(--edge-soft);
font-size:10px;
line-height:1.2;
}

.main-portal .instrument-line:last-child {
border-bottom:none;
}

.main-portal .instrument-line:hover {
background:#151515;
}

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

.main-portal .instrument-value {
color:var(--text-soft);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.main-portal .instrument-line:hover .instrument-value {
color:#ffffff;
}

/* -----------------------------------------
16. Footer split
----------------------------------------- */

.main-portal .footer-grid {
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:var(--space-inner);
margin-top:var(--space-inner);
align-items:stretch;
}

.main-portal .footer-grid .panel {
height:100%;
}

.main-portal .manual-panel {
margin-top:0;
}

.main-portal .sample-row {
display:grid;
grid-template-columns:150px minmax(0,1fr);
align-items:center;
gap:var(--space-inner);
min-height:24px;
padding:4px 0;
border-bottom:1px solid var(--edge-soft);
}

.main-portal .sample-row:first-child {
border-top:1px solid var(--edge-soft);
}

.main-portal .sample-row:hover {
background:#151515;
}

.main-portal .sample-label {
color:var(--text-dim);
font-size:10px;
line-height:1.25;
}

.main-portal .sample-value {
color:var(--text-soft);
font-size:10px;
line-height:1.35;
}

.main-portal .sample-row:hover .sample-value {
color:#ffffff;
}

.main-portal .policy-list {
border-top:1px solid var(--edge-soft);
border-bottom:1px solid var(--edge-soft);
}

.main-portal .policy-row {
display:grid;
grid-template-columns:minmax(0,1fr) 18px;
align-items:center;
gap:var(--space-inner);
height:24px;
padding:0 2px;
border-bottom:1px solid var(--edge-soft);
font-size:10px;
line-height:1.2;
}

.main-portal .policy-row:last-child {
border-bottom:none;
}

.main-portal .policy-row:hover {
background:#151515;
}

.main-portal .policy-row a {
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:var(--text-soft) !important;
}

.main-portal .policy-row:hover a {
color:#ffffff !important;
text-decoration:none !important;
}

.main-portal .policy-mark {
color:var(--text-dim);
font-size:14px;
line-height:1;
white-space:nowrap;
text-align:right;
}

.main-portal .policy-row:hover .policy-mark {
color:#ffffff;
}

.main-portal .social-strip {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:var(--space-tight);
margin-top:var(--space-inner);
}

.main-portal .social-icon {
display:block;
height:26px;
min-width:0;
}

.main-portal .social-icon a {
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:26px !important;
border:1px solid var(--edge-soft) !important;
background:#111111 !important;
color:var(--text-soft) !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
box-sizing:border-box !important;
}

.main-portal .social-icon a:hover {
background:#1c1c1c !important;
color:#ffffff !important;
border-color:#3a3a3a !important;
text-decoration:none !important;
}

/* -----------------------------------------
17. Responsive
----------------------------------------- */

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

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

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

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

.main-portal .notice-line {
grid-template-columns:62px minmax(0,1fr);
min-height:32px;
}

.main-portal .notice-date,
.main-portal .notice-action {
display:none;
}
}

/* -----------------------------------------
Analog hover normalization
----------------------------------------- */
.main-portal a,
.main-portal button,
.main-portal .notice-line,
.main-portal .notice-line *,
.main-portal .notice-action,
.main-portal .portal-cat-anchor .portal-cat-shape,
.main-portal .portal-cat-anchor .portal-cat-label,
.main-portal .record-link,
.main-portal .record-link *,
.main-portal .archive-row,
.main-portal .archive-row *,
.main-portal .tracker-row,
.main-portal .tracker-row *,
.main-portal .guestbook-row,
.main-portal .guestbook-row * {
transition:none !important;
}
/* -----------------------------------------
18. Fixed viewport main page fill
----------------------------------------- */

/*
대문은 고정 뷰포트 셸 안에서 하나의 패널 화면처럼 채운다.
외곽 프레임과 내부 우물은 Layout.css의 .liberty-content-main / .mw-parser-output이 담당한다.
main-portal은 스코프와 내부 모듈 배치만 담당하며, 남는 세로 공간은 하단 모듈 구역이 흡수한다.
*/

body.clbi-main-page .liberty-content-main .mw-parser-output,
body.page-대문 .liberty-content-main .mw-parser-output,
body.rootpage-대문 .liberty-content-main .mw-parser-output {
overflow:hidden !important;
}

body.clbi-main-page .main-portal,
body.page-대문 .main-portal,
body.rootpage-대문 .main-portal {
height:100%;
min-height:0;
display:flex;
flex-direction:column;
gap:var(--space-block);
overflow:hidden;
}

body.clbi-main-page .main-portal .notice-rail,
body.page-대문 .main-portal .notice-rail,
body.rootpage-대문 .main-portal .notice-rail,
body.clbi-main-page .main-portal .lab-logo,
body.page-대문 .main-portal .lab-logo,
body.rootpage-대문 .main-portal .lab-logo,
body.clbi-main-page .main-portal [data-component="category-nav"],
body.page-대문 .main-portal [data-component="category-nav"],
body.rootpage-대문 .main-portal [data-component="category-nav"],
body.clbi-main-page .main-portal .console,
body.page-대문 .main-portal .console,
body.rootpage-대문 .main-portal .console,
body.clbi-main-page .main-portal .ticker,
body.page-대문 .main-portal .ticker,
body.rootpage-대문 .main-portal .ticker,
body.clbi-main-page .main-portal .footer-grid,
body.page-대문 .main-portal .footer-grid,
body.rootpage-대문 .main-portal .footer-grid {
margin:0;
}

body.clbi-main-page .main-portal .notice-rail,
body.page-대문 .main-portal .notice-rail,
body.rootpage-대문 .main-portal .notice-rail,
body.clbi-main-page .main-portal .lab-logo,
body.page-대문 .main-portal .lab-logo,
body.rootpage-대문 .main-portal .lab-logo,
body.clbi-main-page .main-portal [data-component="category-nav"],
body.page-대문 .main-portal [data-component="category-nav"],
body.rootpage-대문 .main-portal [data-component="category-nav"],
body.clbi-main-page .main-portal .console,
body.page-대문 .main-portal .console,
body.rootpage-대문 .main-portal .console,
body.clbi-main-page .main-portal .ticker,
body.page-대문 .main-portal .ticker,
body.rootpage-대문 .main-portal .ticker,
body.clbi-main-page .main-portal .footer-grid,
body.page-대문 .main-portal .footer-grid,
body.rootpage-대문 .main-portal .footer-grid {
flex:0 0 auto;
}

body.clbi-main-page .main-portal .module-grid,
body.page-대문 .main-portal .module-grid,
body.rootpage-대문 .main-portal .module-grid {
flex:1 1 auto;
min-height:0;
margin:0;
}

body.clbi-main-page .main-portal .console,
body.page-대문 .main-portal .console,
body.rootpage-대문 .main-portal .console,
body.clbi-main-page .main-portal .console-body,
body.page-대문 .main-portal .console-body,
body.rootpage-대문 .main-portal .console-body,
body.clbi-main-page .main-portal .console-grid,
body.page-대문 .main-portal .console-grid,
body.rootpage-대문 .main-portal .console-grid,
body.clbi-main-page .main-portal .panel,
body.page-대문 .main-portal .panel,
body.rootpage-대문 .main-portal .panel,
body.clbi-main-page .main-portal .instrument-panel,
body.page-대문 .main-portal .instrument-panel,
body.rootpage-대문 .main-portal .instrument-panel,
body.clbi-main-page .main-portal .panel-body,
body.page-대문 .main-portal .panel-body,
body.rootpage-대문 .main-portal .panel-body,
body.clbi-main-page .main-portal .instrument-body,
body.page-대문 .main-portal .instrument-body,
body.rootpage-대문 .main-portal .instrument-body {
min-height:0;
}

body.clbi-main-page .main-portal .panel-body,
body.page-대문 .main-portal .panel-body,
body.rootpage-대문 .main-portal .panel-body,
body.clbi-main-page .main-portal .instrument-body,
body.page-대문 .main-portal .instrument-body,
body.rootpage-대문 .main-portal .instrument-body {
overflow:hidden;
}

body.clbi-main-page .main-portal .footer-grid,
body.page-대문 .main-portal .footer-grid,
body.rootpage-대문 .main-portal .footer-grid {
min-height:0;
}