미디어위키:MainPage.css: 두 판 사이의 차이

2026년 7월 21일 (화) 11:56 기준 최신판

/* =========================================
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;
    --manifesto-divider-gap: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;
    vector-effect:non-scaling-stroke;
    shape-rendering:crispEdges;
}

.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:'NanumMyeongjoBold Pixel 18';
    src:url('/fonts/NanumMyeongjoBoldPixel18.woff2?v=20260713-perfect-bottom-direct-002') 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:calc(48px + var(--manifesto-divider-gap) + 1px) !important;
    min-height:calc(48px + var(--manifesto-divider-gap) + 1px) !important;
    max-height:calc(48px + var(--manifesto-divider-gap) + 1px) !important;
    margin:0 0 var(--manifesto-divider-gap) !important;
    padding:0 0 var(--manifesto-divider-gap) !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;
    /* 구분선은 ManifestoIntro가 만드는 좌우 실선 두 개만 사용한다. */
    border-bottom:0 !important;
    font-family:'NanumMyeongjoBold 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:'NanumMyeongjoBold 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:26px !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:'NanumMyeongjoBold 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:26px !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 10px !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;
}

/*
길라잡이는 시대의 대륙 패널처럼 본문 DOM을 유지한 채 화면만 전환한다.
현재 단계에서는 왼쪽 더미 메뉴로 진입 애니메이션과 버튼 디자인만 확인한다.
*/
.main-portal .main-body-well > .main-guide-screen {
    flex:1 1 0;
    display:block;
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    background:transparent;
    border:0;
    box-shadow:none;
    z-index:1;
}

.main-portal .main-body-well > .main-guide-screen[hidden],
.main-portal .main-body-well > .main-manifesto[hidden] {
    display:none !important;
}

.main-portal .main-guide-menu {
    position:absolute;
    top:10px;
    left:10px;
    width:230px;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    z-index:2;
}

.main-portal .main-guide-menu-item {
    width:230px;
    height:30px;
    margin:0;
    padding:0;
    opacity:0;
    transform:translateX(-240px);
    will-change:transform, opacity;
}

.main-portal .main-guide-screen.is-guide-menu-entering .main-guide-menu-item {
    animation:main-guide-menu-enter 260ms cubic-bezier(.16,.84,.24,1) both;
    animation-delay:calc(var(--guide-menu-order) * 44ms);
}

@keyframes main-guide-menu-enter {
    0% {
        opacity:0;
        transform:translateX(-240px);
    }
    72% {
        opacity:1;
        transform:translateX(4px);
    }
    100% {
        opacity:1;
        transform:translateX(0);
    }
}

.main-portal .main-guide-menu-button {
    appearance:none;
    -webkit-appearance:none;
    display:grid;
    grid-template-columns:30px minmax(0,1fr) 14px;
    align-items:center;
    width:230px;
    height:30px;
    margin:0;
    padding:0;
    overflow:hidden;
    box-sizing:border-box;
    color:#e2e2e2;
    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;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    line-height:28px;
    text-align:left;
    text-shadow:1px 1px 0 #050505;
    cursor:pointer;
}

.main-portal .main-guide-menu-number {
    display:block;
    width:30px;
    height:28px;
    color:#8f8f8f;
    background:#101010;
    border-right:1px solid #050505;
    box-shadow:inset 0 1px 0 #242424;
    line-height:28px;
    text-align:center;
}

.main-portal .main-guide-menu-label {
    display:block;
    min-width:0;
    height:28px;
    padding:0 8px;
    overflow:hidden;
    line-height:28px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.main-portal .main-guide-menu-arrow {
    display:block;
    width:14px;
    height:28px;
    color:#8f8f8f;
    line-height:27px;
    text-align:center;
}

.main-portal .main-guide-menu-button:hover,
.main-portal .main-guide-menu-button:focus-visible {
    color:#ffffff;
    background:#242424;
    outline:0;
}

.main-portal .main-guide-menu-button:hover .main-guide-menu-number,
.main-portal .main-guide-menu-button:focus-visible .main-guide-menu-number,
.main-portal .main-guide-menu-button:hover .main-guide-menu-arrow,
.main-portal .main-guide-menu-button:focus-visible .main-guide-menu-arrow {
    color:#ffffff;
}

.main-portal .main-guide-menu-button:active {
    color:#e2e2e2;
    background:#101010;
    box-shadow:
        inset 0 1px 0 #101010,
        inset -1px 0 0 #101010,
        inset 1px 0 0 #555555,
        inset 0 -1px 0 #555555;
}

@media (prefers-reduced-motion:reduce) {
    .main-portal .main-guide-screen.is-guide-menu-entering .main-guide-menu-item {
        animation:none;
        opacity:1;
        transform:none;
    }
}

/* -----------------------------------------
상단 카테고리 중앙 「프로젝트」 기둥 / 20260716
-----------------------------------------
버튼 2개 - #1d1d1d 기둥 - 버튼 2개.

CategoryPillar.js가 기존 project 버튼의 좌우 사선과 2px 간격을 그대로 사용한다.
기둥은 같은 경사를 유지한 채 SVG의 위·아래로 3px 우물을 관통하며 외곽 프레임과 같은
#1d1d1d 면에 직접 닿는다. 상하 외곽선은 두지 않아 하나의 패널로
이어진다. 버튼과 접하는 좌우의 #050505 외곽선은 생략하되,
기존 안쪽 방향성 광원선을 그 외곽선 좌표로 한 칸 이동한다.
안쪽선이 있던 자리는 별도 선 없이 #1d1d1d 본체 면으로 돌아간다.
*/
.main-portal .portal-category-svg.has-category-pillar
.portal-cat-anchor[data-category-key="project"],
.main-portal .portal-category-svg.has-category-pillar
.portal-category-pillar-source {
    display:none !important;
    pointer-events:none !important;
}

.main-portal .portal-category-pillar {
    pointer-events:none;
    shape-rendering:crispEdges;
}

.main-portal .portal-category-pillar-surface {
    fill:#1d1d1d;
    stroke:none;
}

.main-portal .portal-category-pillar-line {
    fill:none;
    stroke-width:1;
    vector-effect:non-scaling-stroke;
    shape-rendering:crispEdges;
}

.main-portal .portal-category-pillar-shadow {
    stroke:#101010;
}

.main-portal .portal-category-pillar-highlight {
    stroke:#555555;
}

.main-portal .portal-category-pillar-label {
    fill:#e2e2e2;
    cursor:default;
    pointer-events:none;
}

/* -----------------------------------------
상단 카테고리 하단 작품 버튼 / 20260721
-----------------------------------------
상단 카테고리 프레임은 001 기준의 완전한 사각 외곽을 유지한다.
하단 작품 섹션은 상단 하부 프레임을 덮지 않는다.
두 구조는 #050505 하부 외곽선 1px만 공유한다.

행 구조(비축소 CSS px):
- 공유 외곽선 1px
- 순수 #080808 우물 2px
- 버튼 외곽 22px
- 순수 #080808 우물 2px
- 하단 프레임 8px
- SVG 전체 35px, margin-top:-1px, 실제 추가 높이 34px
*/
.main-portal > [data-component="portal-section-nav"] {
    flex:0 0 35px !important;
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:35px !important;
    min-height:35px !important;
    max-height:35px !important;
    margin:-1px 0 0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:2 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    isolation:auto !important;
}

.main-portal .portal-section-nav,
.main-portal .portal-section-svg {
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:35px !important;
    min-height:35px !important;
    max-height:35px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.main-portal .portal-section-frame-edge {
    fill:#050505;
    stroke:none;
}

.main-portal .portal-section-frame-surface {
    fill:#1d1d1d;
    stroke:none;
}

.main-portal .portal-section-frame-well {
    fill:#080808;
    stroke:none;
}

.main-portal .portal-section-frame-edge,
.main-portal .portal-section-frame-surface,
.main-portal .portal-section-frame-well,
.main-portal .portal-section-button-geometry .portal-cat-edge,
.main-portal .portal-section-button-geometry .portal-cat-surface {
    shape-rendering:crispEdges;
}

.main-portal .portal-section-frame-highlight,
.main-portal .portal-section-frame-shadow,
.main-portal .portal-section-well-highlight,
.main-portal .portal-section-well-shadow {
    fill:none;
    stroke-width:1;
    vector-effect:non-scaling-stroke;
    shape-rendering:crispEdges;
}

.main-portal .portal-section-frame-highlight,
.main-portal .portal-section-well-highlight {
    stroke:#555555;
}

.main-portal .portal-section-frame-shadow,
.main-portal .portal-section-well-shadow {
    stroke:#101010;
}

.main-portal .portal-section-anchor,
.main-portal .portal-section-button-geometry {
    pointer-events:auto;
}

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

/* 선언문 전용 장식은 길라잡이 화면으로 넘어갈 때 함께 숨긴다. */
.main-portal.is-guide-screen-active .main-body-well > .wiki-decoration,
.main-portal.is-guide-screen-active .main-body-well > [data-wiki-decoration-rendered="1"] {
    visibility:hidden !important;
    pointer-events: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:65px;
    margin:2px 0 0;
    padding:0;
    position:relative;
    z-index:2147483000 !important;
    pointer-events:auto;
}

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

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

.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 65px;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:65px !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;
}

/* 길라잡이는 42px 본체·광원 + 상하 1px #050505 외곽선으로 44px이다.
   상하 2px #080808 간격, 상단 9px·하단 8px 프레임을 포함한 전체 행은 65px이다.
   상단 9px 중 외곽선·광원선을 제외한 #1d1d1d 실색 영역은 7px이다. */
body.action-view.clbi-main-page
.main-portal
.main-body-well > [data-component="category-guide-nav"] {
    flex:0 0 65px !important;
}

/* -----------------------------------------
버튼 프레임 / 상단 유지·하단 연속 용접
-----------------------------------------
상단 총 36px:
4px 프레임 + 2px #080808 + 24px 버튼 + 2px #080808 + 4px 프레임

하단 총 65px:
중앙에서 위로 솟은 패널 하단 프레임 + 2px #080808
+ 44px 길라잡이 외곽 + 2px #080808 + 공유 하단 프레임

하단은 별도 ㄷ자 상자가 아니다.
본문 패널의 하단 외곽선 자체가 중앙에서 사선으로 올라갔다 내려오는
하나의 연속된 프레임이다.
*/

/* ─────────────────────────────────────────
상단: 버튼 24px / 프레임과 2px 간격을 실제로 확보
───────────────────────────────────────── */
.main-portal > [data-component="category-nav"] {
    flex:none !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:8px !important;
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    box-sizing:border-box !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;
}

.main-portal > [data-component="category-nav"] > .portal-category-nav {
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:2px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    background:#080808 !important;
    border:0 !important;
    /* 2px 간격은 순수 #080808이며 별도 광원선을 두지 않는다. */
    box-shadow:none !important;
}

.main-portal > [data-component="category-nav"] .portal-category-svg {
    display:block !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    overflow:visible !important;
}

/* ─────────────────────────────────────────
하단: 기본 하단 프레임 위로만 중앙 버튼 프레임이 돌출
───────────────────────────────────────── */

/*
본문 패널의 기본 하단 프레임 두께는 유지하고,
그 위로만 길라잡이 사다리꼴 프레임이 돌출된다.
패널 전체가 두꺼운 하단 밴드가 되지 않도록 한다.
*/
body.action-view.clbi-main-page .main-portal .main-body-panel,
.main-portal .main-body-panel {
    padding:9px !important;
    border-bottom:0 !important;
    box-shadow:
        inset 0 1px 0 #555555,
        inset -1px 0 0 #555555,
        inset 1px 0 0 #101010 !important;
}

.main-portal .main-body-panel > [data-component="category-guide-nav"] {
    display:block !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:auto !important;
    height:65px !important;
    min-height:65px !important;
    max-height:65px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    isolation:isolate !important;
    z-index:2147483000 !important;
    pointer-events:auto !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.main-portal .main-body-panel > [data-component="category-guide-nav"] > .portal-guide-nav,
.main-portal .main-body-panel > [data-component="category-guide-nav"] .portal-guide-svg {
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:65px !important;
    min-height:65px !important;
    max-height:65px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    z-index:2147483000 !important;
}

/* 기본 하단 프레임 + 중앙 돌출 프레임 */
.main-portal .portal-guide-panel-bottom-surface,
.main-portal .portal-guide-weld-outer {
    fill:#1d1d1d;
    stroke:none;
}

.main-portal .portal-guide-weld-well {
    fill:#080808;
    stroke:none;
}

.main-portal .portal-guide-panel-bottom-edge,
.main-portal .portal-guide-weld-edge {
    stroke:#050505;
    stroke-width:1;
    fill:none;
    vector-effect:non-scaling-stroke;
    shape-rendering:crispEdges;
}

/* 하단 기본 프레임: 상단만 #555555, 하단만 #101010. */
.main-portal .portal-guide-panel-bottom-highlight,
.main-portal .portal-guide-panel-bottom-shadow,
.main-portal .portal-guide-weld-shadow,
.main-portal .portal-guide-panel-bottom-inner {
    stroke:#101010;
    stroke-width:1;
    fill:none;
    vector-effect:non-scaling-stroke;
    shape-rendering:crispEdges;
}

/* 실제 길라잡이 버튼 외곽은 44px 사다리꼴이다. 바깥 돌출 프레임만 하단 기본 프레임과 용접된다. */
.main-portal .portal-guide-nav.is-continuous-weld
.portal-cat-inset-bottom {
    display:block !important;
}

/*
길라잡이 진입 상태:
- 전체 좌표계가 65px에서 45px로 실제 축소된다.
- 중앙 버튼은 44px에서 24px으로만 줄고, #1d1d1d 실면 7px의 9/8px 프레임은 유지한다.
- 좌우 우물은 중앙 버튼과 접합되는 단일 메인 프레임이 하단에서 올라와 메운다.
*/
.main-portal .portal-guide-button-geometry {
    transform:none;
}

.main-portal .portal-guide-rising-main-frame {
    transform-box:fill-box;
    transform-origin:center bottom;
}

.main-portal .portal-guide-rising-main-frame-edge {
    fill:#050505;
    stroke:none;
    shape-rendering:crispEdges;
}

.main-portal .portal-guide-rising-main-frame-surface {
    fill:#1d1d1d;
    stroke:none;
    shape-rendering:crispEdges;
}

.main-portal .portal-guide-rising-main-frame-highlight-top,
.main-portal .portal-guide-rising-main-frame-highlight-left {
    fill:#555555;
    stroke:none;
    shape-rendering:crispEdges;
}

.main-portal .portal-guide-rising-main-frame-shadow-right,
.main-portal .portal-guide-rising-main-frame-shadow-bottom {
    fill:#101010;
    stroke:none;
    shape-rendering:crispEdges;
}

/* 예전 우물 내부 mount 규칙 차단 */
.main-portal .main-body-well > [data-component="category-guide-nav"],
body.action-view.clbi-main-page
.main-portal
.main-body-well > [data-component="category-guide-nav"] {
    flex:none !important;
    width:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}

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



/* -----------------------------------------
광원선 중복 방지 확정 규칙
-----------------------------------------
#555555는 독립된 #1d1d1d 돌출면의 상단·우측에만 사용한다.
#101010은 같은 면의 좌측·하단에만 사용한다.
#080808 우물과 2px 간격에는 광원선을 추가하지 않는다.
*/
.main-portal > [data-component="category-nav"] > .portal-category-nav {
    box-shadow:none !important;
}

/* 본문 우물은 오목한 방향성 선을 유지한다. */
.main-portal .main-body-well {
    box-shadow:
        inset 0 1px 0 #101010,
        inset -1px 0 0 #101010,
        inset 1px 0 0 #555555,
        inset 0 -1px 0 #555555 !important;
}

/* -----------------------------------------
프레임 안쪽선·하단 아치 오버레이 확정 규칙
-----------------------------------------
상단:
- 기존 구조와 치수 유지
- #1d1d1d 프레임의 안쪽 경계에 방향성 1px 선 추가
- 안쪽 우물 경계는 상단/우측 #101010, 좌측/하단 #555555
- 선은 프레임의 마지막 1px에 놓여 2px #080808 간격을 침범하지 않음

하단:
- main-body-panel의 원래 전체 프레임을 그대로 복구
- SVG는 전체 하단 프레임을 다시 그리지 않음
- 버튼과 하부를 비운 중앙 아치형 프레임 조각만 기존 프레임 위에 얹음
*/

/* 상단 외곽 프레임의 안쪽 우물 경계
   우물은 오목하므로 돌출면과 반대 방향이다.
   상단/우측 #101010, 좌측/하단 #555555. */
.main-portal > [data-component="category-nav"]::after {
    content:"";
    display:block;
    position:absolute;
    inset:8px;
    z-index:3;
    pointer-events:none;
    box-sizing:border-box;
    border-style:solid;
    border-width:1px;
    border-color:#101010 #101010 #555555 #555555;
}

/* 2px 우물 간격과 버튼은 안쪽선보다 아래 레이어에 둔다. */
.main-portal > [data-component="category-nav"] > .portal-category-nav {
    z-index:1 !important;
    box-shadow:none !important;
}

.main-portal > [data-component="category-nav"] .portal-category-svg {
    z-index:1 !important;
}

/* 기존 본문 패널의 전체 프레임을 복구한다. */
body.action-view.clbi-main-page .main-portal .main-body-panel,
.main-portal .main-body-panel {
    padding:9px !important;
    border:1px solid #050505 !important;
    box-shadow:
        inset 0 1px 0 #555555,
        inset -1px 0 0 #555555,
        inset 1px 0 0 #101010,
        inset 0 -1px 0 #101010 !important;
}

/* 아치 오버레이 좌표계. 패널 하부 자체는 투명하게 둔다. */
.main-portal .main-body-panel > [data-component="category-guide-nav"] {
    height:65px !important;
    min-height:65px !important;
    max-height:65px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.main-portal .main-body-panel > [data-component="category-guide-nav"] > .portal-guide-nav,
.main-portal .main-body-panel > [data-component="category-guide-nav"] .portal-guide-svg {
    height:65px !important;
    min-height:65px !important;
    max-height:65px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

/* 아치 프레임 면과 내부 우물 */
.main-portal .portal-guide-arch-outer {
    fill:#1d1d1d;
    stroke:none;
}

.main-portal .portal-guide-arch-well {
    fill:#080808;
    stroke:none;
}

/* 아치의 최외곽: 상단과 양쪽 사선만 */
.main-portal .portal-guide-arch-edge {
    stroke:#050505;
    stroke-width:1;
    fill:none;
    vector-effect:non-scaling-stroke;
    shape-rendering:crispEdges;
}

/* 바깥 돌출면의 광원 */
.main-portal .portal-guide-arch-highlight {
    stroke:#555555;
    stroke-width:1;
    fill:none;
    vector-effect:non-scaling-stroke;
    shape-rendering:crispEdges;
}

.main-portal .portal-guide-arch-shadow {
    stroke:#101010;
    stroke-width:1;
    fill:none;
    vector-effect:non-scaling-stroke;
    shape-rendering:crispEdges;
}


/* 버튼과 마주 보는 하단 본문 프레임의 상단 1px만 담당한다.
   선 stroke가 아니라 정수 좌표의 1px rect이므로 2px로 번지지 않는다. */
.main-portal .portal-guide-facing-highlight {
    fill:#555555;
    stroke:none;
    shape-rendering:crispEdges;
}

/* 아치 안쪽 우물 경계: 상단/우측 어두움, 좌측 밝음. 하부는 열림. */
.main-portal .portal-guide-arch-inner-highlight {
    stroke:#101010;
    stroke-width:1;
    fill:none;
    vector-effect:non-scaling-stroke;
    shape-rendering:crispEdges;
}

.main-portal .portal-guide-arch-inner-shadow {
    stroke:#555555;
    stroke-width:1;
    fill:none;
    vector-effect:non-scaling-stroke;
    shape-rendering:crispEdges;
}

/* 이전 SVG가 그리던 독립 하단 프레임은 강제로 숨긴다. */
.main-portal .portal-guide-panel-bottom-surface,
.main-portal .portal-guide-panel-bottom-edge,
.main-portal .portal-guide-panel-bottom-highlight,
.main-portal .portal-guide-panel-bottom-shadow,
.main-portal .portal-guide-panel-bottom-inner,
.main-portal .portal-guide-weld-outer,
.main-portal .portal-guide-weld-well,
.main-portal .portal-guide-weld-edge,
.main-portal .portal-guide-weld-highlight,
.main-portal .portal-guide-weld-shadow {
    display:none !important;
}

/* -----------------------------------------
최종 시각 픽셀 보정 / 20260712
-----------------------------------------
목표는 선언값이 아니라 화면에서 보이는 색 면이다.

상단 카테고리:
- 우물 inset 1px
- 순수 #080808 간격 2px
- 실제 버튼 22px
- 기존 전체 행 높이는 유지

본문 패널:
- #050505 외곽선 1px
- 방향성 inset 1px
- 순수 #1d1d1d 면 7px
- 내부 #080808 우물
*/

/* ─────────────────────────────────────────
상단 카테고리: 실제 보이는 우물 간격 2px
───────────────────────────────────────── */
.main-portal > [data-component="category-nav"] {
    padding:8px !important;
    background:#1d1d1d !important;
    border:1px solid #050505 !important;
    box-shadow:
        inset 0 1px 0 #555555,
        inset -1px 0 0 #555555,
        inset 1px 0 0 #101010,
        inset 0 -1px 0 #101010 !important;
}

/* 이전 border 기반 내부선은 코너 혼색을 만들므로 완전히 제거한다. */
.main-portal > [data-component="category-nav"]::after {
    content:none !important;
    display:none !important;
    border:0 !important;
    box-shadow:none !important;
}

/*
우물 inset 1px + padding 3px.
첫 1px은 inset이고, 그 뒤 순수 #080808이 정확히 2px 남는다.
*/
.main-portal > [data-component="category-nav"] > .portal-category-nav {
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:3px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    background:#080808 !important;
    border:0 !important;
    box-shadow:
        inset 0 1px 0 #101010,
        inset -1px 0 0 #101010,
        inset 1px 0 0 #555555,
        inset 0 -1px 0 #555555 !important;
}

.main-portal > [data-component="category-nav"] .portal-category-svg {
    display:block !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:22px !important;
    min-height:22px !important;
    max-height:22px !important;
    overflow:visible !important;
}

/* ─────────────────────────────────────────
본문 패널: 순수 #1d1d1d 면 7px + 선명한 inset
───────────────────────────────────────── */
body.action-view.clbi-main-page .main-portal .main-body-panel,
.main-portal .main-body-panel {
    padding:8px !important;
    position:relative !important;
    background:#1d1d1d !important;
    border:1px solid #050505 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

/*
box-shadow 코너 중첩 대신 네 개의 불투명 1px 면을 직접 그린다.
첫 번째 레이어가 코너 우선권을 가진다.
- 상단 #555555가 좌상단/우상단 우선
- 우측 #555555가 우하단 우선
- 좌측/하단 #101010
*/
body.action-view.clbi-main-page .main-portal .main-body-panel::before,
.main-portal .main-body-panel::before {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2147482990 !important;
    pointer-events:none !important;
    border:0 !important;
    background:
        linear-gradient(#555555,#555555) 0 0 / 100% 1px no-repeat,
        linear-gradient(#555555,#555555) 100% 0 / 1px 100% no-repeat,
        linear-gradient(#101010,#101010) 0 0 / 1px 100% no-repeat,
        linear-gradient(#101010,#101010) 0 100% / 100% 1px no-repeat !important;
}

/* 본문 우물의 오목한 inset도 최종 규칙으로 고정한다. */
.main-portal .main-body-well {
    background:#080808 !important;
    border:0 !important;
    box-shadow:
        inset 0 1px 0 #101010,
        inset -1px 0 0 #101010,
        inset 1px 0 0 #555555,
        inset 0 -1px 0 #555555 !important;
}

/* -----------------------------------------
본문 프레임 최종 시각 폭 7px
-----------------------------------------
inset은 layout 폭을 소비하지 않고 padding 면 위에 그려진다.
따라서 순수 프레임 폭 7px 목표에는 padding 자체를 7px로 둔다.
상단 버튼과 하단 아치 구조는 변경하지 않는다.
*/
body.action-view.clbi-main-page .main-portal .main-body-panel,
.main-portal .main-body-panel {
    /*
    inset 1px이 프레임 면 위를 덮으므로 레이아웃 padding은 8px을 사용한다.
    최종 화면에서 보이는 순수 #1d1d1d 면은 7px이다.
    */
    padding:8px !important;
}

/* -----------------------------------------
하단 아치 프레임 외곽·하단 안쪽선 정확 보정 / 20260712
-----------------------------------------
대상 구분:
- 버튼 자체의 외곽 #050505는 유지
- 아치형 바깥 프레임의 외부 #050505만 제거
- 버튼 하단 inset은 기본 #101010 유지
- 아치 프레임 하단 안쪽 면에만 #555555 1px 추가
*/

/* 버튼 자체는 원래 마감으로 복구한다. */
.main-portal .portal-guide-nav .portal-cat-edge {
    fill:#050505 !important;
}

.main-portal .portal-guide-nav .portal-cat-inset-bottom {
    stroke:#101010 !important;
}

/* 아치형 프레임 바깥의 #050505 외곽선만 제거한다. */
.main-portal .portal-guide-arch-edge {
    display:none !important;
}

/* 아치 프레임의 실제 하단 안쪽 면. 버튼과는 별도 요소다. */
.main-portal .portal-guide-arch-inner-bottom {
    display:block !important;
    fill:#555555 !important;
    stroke:none !important;
    shape-rendering:crispEdges;
}

/* 이전에 잘못 집었던 패널 하단 보조선에는 밝은 선을 두지 않는다. */
.main-portal .portal-guide-panel-bottom-inner {
    stroke:#101010 !important;
}



/* -----------------------------------------
하단 길라잡이 통합 프레임 위치 확정 / 20260713
본문 패널의 원래 하단 프레임은 분리하지 않는다.
버튼·아치·클릭 영역만 현재 상태에서 1px 위로 이동한다.
----------------------------------------- */
.main-portal .main-body-panel > [data-component="category-guide-nav"] {
    bottom:1px !important;
}


/* -----------------------------------------
하단 중앙 접합: 애드온 프레임 1px 연장 / 20260713
- 본문 패널의 원래 전체 프레임은 그대로 유지
- 버튼과 좌·우·상단 아치 프레임만 애드온
- 별도 #555555 하단선은 생성하지 않음
- JS가 아치 외곽면만 아래로 1px 연장하여 원래 우물 하단선을 같은 행에서 덮음
----------------------------------------- */
.main-portal .portal-guide-arch-inner-bottom {
    display:none !important;
}


/* -----------------------------------------
대문 선언문 절차적 진입 애니메이션 / 20260713
-----------------------------------------
제목·구분선·본문 행은 실제 HTML 요소를 Web Animations API로 움직인다.
CSS transition 클래스 전환에 의존하지 않아 초기 진입·새로고침·SPA에서
최종 상태로 순간 점프하는 문제를 피한다.
*/

/*
원문은 기본 표시 상태다.
JS가 폰트·행 측정·구분선 DOM까지 모두 준비한 뒤 붙이는
.manifesto-intro-prepared만 애니메이션의 초기 프레임을 소유한다.
따라서 강력 새로고침이나 raw 스크립트 실패가 본문을 숨길 수 없다.
*/

.main-portal.manifesto-intro-prepared .main-manifesto-title {
    position:relative !important;
    opacity:0;
    border-bottom:0 !important;
}

.main-portal .main-manifesto-title {
    position:relative !important;
    border-bottom:0 !important;
    box-shadow:none !important;
    background-image:none !important;
    text-decoration:none !important;
}

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

.main-portal .main-manifesto-title > .manifesto-divider {
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:1px;
    margin:0;
    padding:0;
    overflow:visible;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    pointer-events:none;
    z-index:4;
}

/* ManifestoIntro가 소유권을 얻은 뒤에는 이전 구분선 소스를 모두 차단한다. */
.main-portal.manifesto-divider-controlled .main-manifesto-title {
    border-bottom:0 !important;
    box-shadow:none !important;
    background-image:none !important;
    text-decoration:none !important;
}

.main-portal.manifesto-divider-controlled .main-manifesto-title::before,
.main-portal.manifesto-divider-controlled .main-manifesto-title::after,
.main-portal.manifesto-divider-controlled .main-manifesto-inner > hr,
.main-portal.manifesto-divider-controlled .main-manifesto-divider,
.main-portal.manifesto-divider-controlled [data-manifesto-divider-track] {
    content:none !important;
    display:none !important;
}

.main-portal .main-manifesto-title > .manifesto-divider > .manifesto-divider-half {
    display:block;
    position:absolute;
    top:0;
    width:50%;
    height:1px;
    margin:0;
    padding:0;
    background:#626262;
    border:0;
    box-shadow:none;
    transform:scaleX(0);
    will-change:transform;
}

.main-portal .main-manifesto-title > .manifesto-divider > .manifesto-divider-left {
    left:0;
    transform-origin:100% 50%;
}

.main-portal .main-manifesto-title > .manifesto-divider > .manifesto-divider-right {
    right:0;
    transform-origin:0 50%;
}

/*
제목 구분선이 완성된 뒤 같은 위치에서 분리되어 본문 하단까지 내려가는 실선.
최종 이동 거리는 ManifestoIntro가 실제 렌더된 본문 높이를 정수 px로 측정한다.
*/
.main-portal .main-manifesto-inner > .manifesto-divider-drop {
    display:block;
    position:absolute;
    left:0;
    width:100%;
    height:1px;
    margin:0;
    padding:0;
    overflow:hidden;
    background:#626262;
    border:0;
    box-shadow:none;
    opacity:0;
    transform:translateY(0);
    will-change:transform, opacity;
    pointer-events:none;
    z-index:3;
}

.main-portal .main-manifesto-copy.manifesto-line-measuring .manifesto-measure-token {
    display:inline;
    white-space:normal;
    font:inherit;
    color:inherit;
}

.main-portal .main-manifesto-copy .manifesto-line {
    display:block;
    width:100%;
    height:26px;
    min-height:0;
    max-height:26px;
    margin:0;
    padding:0;
    overflow:visible;
    opacity:1;
    line-height:26px !important;
    clip-path:inset(0 0 0 0);
    will-change:height, max-height, opacity, clip-path;
}

.main-portal .main-manifesto-copy .manifesto-line-inner {
    display:block;
    width:100%;
    height:26px;
    margin:0;
    padding:0;
    line-height:26px !important;
    opacity:1;
    transform:translateY(0);
    will-change:transform, opacity;
}

.main-portal.manifesto-intro-prepared .main-manifesto-copy {
    visibility:visible !important;
}

.main-portal.manifesto-intro-prepared .main-manifesto-copy .manifesto-line {
    height:0;
    max-height:0;
    overflow:hidden;
    opacity:0;
    clip-path:inset(0 0 100% 0);
}

.main-portal.manifesto-intro-prepared .main-manifesto-copy .manifesto-line-inner {
    opacity:.18;
    transform:translateY(-10px);
}

.main-portal.manifesto-intro-complete .main-manifesto-title {
    opacity:1;
    border-bottom:0 !important;
}

.main-portal.manifesto-intro-complete .main-manifesto-title > .manifesto-divider > .manifesto-divider-half {
    transform:scaleX(1);
}

.main-portal.manifesto-intro-complete .main-manifesto-copy .manifesto-line {
    height:26px;
    max-height:26px;
    overflow:visible;
    opacity:1;
    clip-path:inset(0 0 0 0);
}

.main-portal.manifesto-intro-complete .main-manifesto-copy .manifesto-line-inner {
    opacity:1;
    transform:translateY(0);
}

@media (prefers-reduced-motion:reduce) {
    .main-portal.manifesto-intro-prepared .main-manifesto-title {
        opacity:1;
        border-bottom:0 !important;
    }

    .main-portal .main-manifesto-title > .manifesto-divider {
        display:block !important;
        left:0 !important;
        width:100% !important;
        background:transparent !important;
    }

    .main-portal .main-manifesto-title > .manifesto-divider > .manifesto-divider-half {
        transform:scaleX(1) !important;
    }

    .main-portal .main-manifesto-inner > .manifesto-divider-drop {
        opacity:1;
    }

    .main-portal.manifesto-intro-prepared .main-manifesto-copy .manifesto-line,
    .main-portal.manifesto-intro-prepared .main-manifesto-copy .manifesto-line-inner {
        height:26px;
        max-height:26px;
        overflow:visible;
        opacity:1;
        clip-path:none;
        transform:none;
    }
}

@@ 1번째 줄: / 1번째 줄: @@
 /* =========================================
 COASTLINE: BLACK ICE - MainPage
-대문 전용 스타일
+로고 + 카테고리 네비 + 선언문 대문
-Full portal layout + SVG category navigation
 ========================================= */
 /*
-설계 목적
+책임 범위
 -----------------------------------------
-이 파일은 대문 전용 화면 전체를 담당한다.
+- 대문 본문 .main-portal 내부만 담당한다.
+- 사이트 공통 셸은 Layout.css가 담당한다.
-이전 Test.css는 실험용이었다.
+- 카테고리 네비의 SVG 구조는 CategoryNav.js가 생성한다.
-그 안에는 대문 레이아웃, 공지, 로고, 이미지 피드, 방명록 더미,
+- 콘솔, 그래프, STATUS, INFORMATION, PROJECTS는 대문에서 제거한다.
-프로젝트 트래커, 상태 패널, 푸터, 카테고리 네비 실험 코드가 섞여 있었다.
+- 「진창」 선언문 배치는 이 파일이 담당하며, 폰트 선언은 Theme.css가 담당한다.
-실사용 단계에서는 Test.css를 import하지 않고,
-대문에서 필요한 요소를 이 파일로 옮긴다.
-중요:
-- 이 파일의 스코프는 .main-portal이다.
-- .stylelab은 테스트용 이름이므로 실사용 본문에서 쓰지 않는다.
-- 카테고리 네비는 CategoryNav.js가 SVG DOM을 생성하고, 이 파일은 시각 스타일만 담당한다.
-- 사선 버튼처럼 클릭/호버 영역과 시각 형태가 일치해야 하는 요소는 SVG를 사용한다.
-*/
-/* -----------------------------------------
-. 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;
+    --panel:#1d1d1d;
---surface-frame:#101010;
+    --well:#080808;
---surface-frame-soft:#141414;
+    --edge:#050505;
---surface-title:#1d1d1d;
+    --highlight:#555555;
---surface-title-hover:#252525;
+    --shadow:#101010;
---surface-well:#080808;
+    --text:#e2e2e2;
---surface-screen:#060606;
+    --text-strong:#ffffff;
---surface-row:#121212;
+    --block-gap:2px;
---surface-row-alt:#151515;
+    --frame:8px;
---surface-inset:#070707;
+    --manifesto-divider-gap: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;
+}
---edge-top:#555555;
+body.action-view.clbi-main-page .liberty-content-main .mw-parser-output {
---edge-side:#2b2b2b;
+    display:flex !important;
---edge-bottom:#050505;
+    flex-direction:column !important;
---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%;
+body.action-view.clbi-main-page .liberty-content-main .mw-parser-output > .main-portal {
-margin:0;
+    flex:1 0 auto;
-padding:0;
+    min-height:0;
-box-sizing:border-box;
-background:transparent;
-color:var(--text-main);
-font-size:11px;
-line-height:1.5;
 }
@@ 87번째 줄: / 51번째 줄: @@
 .main-portal *::before,
 .main-portal *::after {
-box-sizing:border-box;
+    box-sizing:border-box;
 }
-.main-portal a {
+.main-portal a,
-color:var(--text-main) !important;
+.main-portal a:visited {
-text-decoration:none !important;
+    color:var(--text) !important;
+    text-decoration:none !important;
 }
-.main-portal a:hover {
+.main-portal a:hover,
-color:#ffffff !important;
+.main-portal a:focus {
-text-decoration:none !important;
+    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;
 }
 /* -----------------------------------------
-. Frame system
+공통 돌출 프레임
 ----------------------------------------- */
-.main-portal .notice-rail,
+.main-portal .lab-logo {
-.main-portal .lab-logo,
+    background:var(--panel, #1d1d1d);
-.main-portal .console,
+    border:1px solid var(--edge, #050505);
-.main-portal .panel,
+    border-radius:0;
-.main-portal .instrument-panel,
+    box-shadow:
-.main-portal .ticker {
+        inset 0 1px 0 var(--highlight, #555555),
-border:1px solid;
+        inset -1px 0 0 var(--highlight, #555555),
-border-color:
+        inset 1px 0 0 var(--shadow, #101010),
-var(--edge-top)
+        inset 0 -1px 0 var(--shadow, #101010);
-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 {
+.main-portal .lab-logo {
-position:relative;
+    flex:0 0 auto;
-height:var(--title-h);
+    margin:0 0 var(--block-gap);
-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 {
+.main-portal [data-component="category-nav"] {
-display:block;
+    flex:0 0 auto;
-min-width:0;
+    display:block;
-overflow:hidden;
+    width:100%;
-text-overflow:ellipsis;
+    margin:0;
 }
-.main-portal .titlebar > span:first-child {
+/* -----------------------------------------
-flex:1 1 auto;
+로고 프레임
+----------------------------------------- */
+.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 .titlebar > span:last-child {
+.main-portal .portal-logo-well a,
-flex:0 0 auto;
+.main-portal .portal-logo-well .mw-file-description {
-color:#a8a8a8;
+    display:inline-block;
-font-weight:700;
+    line-height:0;
-text-align:right;
+}
+.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);
 }
 /* -----------------------------------------
-. Notice rail
+카테고리 네비
 ----------------------------------------- */
-.main-portal .notice-rail {
+.portal-category-nav {
-width:100%;
+    position:relative;
-margin:0 0 var(--space-block);
+    width:100%;
-background:#101010;
+    height:36px;
-border-color:
+    margin:0;
-#606060
+    padding:0;
-var(--edge-side)
+    overflow:hidden;
-var(--edge-bottom)
+    background:var(--well, #080808);
-var(--edge-side);
+    border:0;
+    border-radius:0;
+    box-shadow:none;
 }
-.main-portal .notice-line {
+.portal-category-svg {
-position:relative;
+    display:block;
-display:grid;
+    width:100%;
-grid-template-columns:72px 96px minmax(0,1fr) 48px;
+    height:100%;
-align-items:center;
+    overflow:visible;
-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;
+각 버튼은 SVG 안에서 독립된 사선 프레임으로 그린다.
+- 외곽 1px: #050505
+- 본체: #1d1d1d
+- 상단/우측 inset: #555555
+- 좌측/하단 inset: #101010
+- 버튼 사이 배경: #080808 2px
+*/
+.portal-cat-edge {
+    fill:#050505;
+    stroke:none;
 }
-.main-portal .notice-line > * {
+.portal-cat-surface {
-position:relative;
+    fill:#1d1d1d;
-z-index:2;
+    stroke:none;
 }
-.main-portal .notice-line:hover {
+.portal-cat-inset {
-background:#1c1c1c;
+    fill:none;
-color:#ffffff;
+    stroke-width:1;
+    vector-effect:non-scaling-stroke;
+    shape-rendering:crispEdges;
 }
-.main-portal .notice-line.is-alert {
+.portal-cat-inset-top,
-background:
+.portal-cat-inset-right {
-repeating-linear-gradient(
+    stroke:#555555;
-deg,
-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 {
+.portal-cat-inset-bottom,
-content:"";
+.portal-cat-inset-left {
-position:absolute;
+    stroke:#101010;
-inset:0;
-z-index:1;
-pointer-events:none;
-background:rgba(0,0,0,0.42);
 }
-.main-portal .notice-line.is-alert:hover::before {
+.portal-cat-hit {
-background:rgba(0,0,0,0.34);
+    fill:transparent;
+    stroke:none;
+    cursor:pointer;
 }
-.main-portal .notice-line.is-notice {
+.portal-cat-anchor:hover .portal-cat-surface,
-background:#141414;
+.portal-cat-anchor:focus .portal-cat-surface {
+    fill:#242424;
 }
-.main-portal .notice-line.is-notice:hover {
+.portal-cat-anchor:active .portal-cat-surface {
-background:#1c1c1c;
+    fill:#101010;
 }
-.main-portal .notice-badge {
+.portal-cat-anchor:active .portal-cat-inset-top,
-display:inline-flex;
+.portal-cat-anchor:active .portal-cat-inset-right {
-align-items:center;
+    stroke:#101010;
-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,
+.portal-cat-anchor:active .portal-cat-inset-bottom,
-.main-portal .notice-line.is-notice .notice-badge {
+.portal-cat-anchor:active .portal-cat-inset-left {
-border-color:#505050;
+    stroke:#555555;
-background:#101010;
-color:#eeeeee;
 }
-.main-portal .notice-date {
+.portal-cat-label {
-color:#9d9d9d;
+    fill:#e2e2e2;
-white-space:nowrap;
+    font-family:inherit;
-font-size:10px;
+    font-size:12px;
-font-family:Consolas, Monaco, monospace !important;
+    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;
 }
-.main-portal .notice-text {
+@media screen and (max-width:820px) {
-min-width:0;
+    .portal-cat-label {
-overflow:hidden;
+        font-size:11px;
-text-overflow:ellipsis;
+    }
-white-space:nowrap;
-color:#e0e0e0;
-font-size:12px;
-font-weight:700;
 }
-.main-portal .notice-line.is-alert .notice-badge,
+@media screen and (max-width:620px) {
-.main-portal .notice-line.is-alert .notice-date,
+    .main-portal {
-.main-portal .notice-line.is-alert .notice-text,
+        --frame:6px;
-.main-portal .notice-line.is-alert .notice-action {
+    }
-text-shadow:
--1px 0 0 #000,
-px 0 0 #000,
--1px 0 #000,
-1px 0 #000,
--1px -1px 0 #000,
-px -1px 0 #000,
--1px 1px 0 #000,
-px 1px 0 #000;
 }
-.main-portal .notice-line:hover .notice-text {
+/* -----------------------------------------
-color:#ffffff;
+대문 선언문 / 실제 픽셀 웹폰트 단일 구현
+----------------------------------------- */
+@font-face {
+    font-family:'NanumMyeongjoBold Pixel 18';
+    src:url('/fonts/NanumMyeongjoBoldPixel18.woff2?v=20260713-perfect-bottom-direct-002') format('woff2');
+    font-weight:400;
+    font-style:normal;
+    font-display:block;
 }
-.main-portal .notice-action {
+.main-portal .main-manifesto {
-justify-self:end;
+    flex:1 0 auto;
-display:inline-flex;
+    min-height:0;
-align-items:center;
+    width:100%;
-justify-content:center;
+    margin:0;
-height:20px;
+    padding:10px 0 24px;
-min-width:38px;
+    display:flex;
-padding:0 5px;
+    align-items:flex-start;
-border:1px solid #3a3a3a;
+    justify-content:center;
-background:#0b0b0b;
+    overflow:visible;
-color:#c8c8c8;
-font-size:10px;
-font-weight:700;
-white-space:nowrap;
-line-height:1;
 }
-.main-portal .notice-line:hover .notice-action {
+.main-portal .main-manifesto-inner {
-border-color:#606060;
+    position:relative !important;
-background:#181818;
+    top:0 !important;
-color:#ffffff;
+    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,
-. Top logo
+.main-portal .main-manifesto-inner::after {
------------------------------------------ */
+    content:none !important;
+    display:none !important;
+    background:none !important;
+}
-.main-portal .lab-logo {
+.main-portal .main-manifesto-title {
-width:100%;
+    position:static !important;
-height:auto;
+    top:auto !important;
-margin:0 0 var(--space-block);
+    left:auto !important;
-padding:10px 0 8px;
+    width:660px !important;
-text-align:center;
+    height:calc(48px + var(--manifesto-divider-gap) + 1px) !important;
-line-height:0;
+    min-height:calc(48px + var(--manifesto-divider-gap) + 1px) !important;
-background:#0b0b0b;
+    max-height:calc(48px + var(--manifesto-divider-gap) + 1px) !important;
+    margin:0 0 var(--manifesto-divider-gap) !important;
+    padding:0 0 var(--manifesto-divider-gap) !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;
+    /* 구분선은 ManifestoIntro가 만드는 좌우 실선 두 개만 사용한다. */
+    border-bottom:0 !important;
+    font-family:'NanumMyeongjoBold 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 .lab-logo a,
+.main-portal .main-manifesto-copy {
-.main-portal .lab-logo .mw-file-description {
+    position:static !important;
-display:inline-block;
+    top:auto !important;
-line-height:0;
+    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:'NanumMyeongjoBold 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:26px !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 .lab-logo img,
+.main-portal .main-manifesto-copy,
-.main-portal .lab-logo .mw-file-element {
+.main-portal .main-manifesto-copy * {
-width:760px;
+    font-family:'NanumMyeongjoBold Pixel 18' !important;
-max-width:90%;
+    font-size:18px !important;
-height:auto;
+    font-weight:400 !important;
-filter:
+    font-style:normal !important;
-grayscale(1)
+    font-synthesis:none !important;
-contrast(1.04)
+    font-kerning:none !important;
-brightness(1.02);
+    font-variant-ligatures:none !important;
+    font-feature-settings:'kern' 0, 'liga' 0 !important;
+    line-height:26px !important;
+    letter-spacing:0 !important;
+    color:#e2e2e2 !important;
+    -webkit-text-fill-color:#e2e2e2 !important;
 }
-/* -----------------------------------------
+.main-portal .main-manifesto-copy p {
-. Category navigation mount
+    position:static !important;
------------------------------------------ */
+    top:auto !important;
+    left:auto !important;
+    width:620px !important;
+    height:auto !important;
+    margin:0 0 10px !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 [data-component="category-nav"] {
+.main-portal .main-manifesto-copy p:last-child {
-display:block;
+    margin-bottom:0 !important;
-width:100%;
-margin:0 0 var(--space-block);
 }
-/* -----------------------------------------
+.main-portal .main-manifesto-bitmap,
-. Category navigation - SVG version
+.main-portal canvas.main-manifesto-bitmap {
------------------------------------------ */
+    display:none !important;
+}
 /*
-SVG 방식에서는 각 항목이 polygon이다.
+길라잡이는 시대의 대륙 패널처럼 본문 DOM을 유지한 채 화면만 전환한다.
-보이는 면, hover 면, click 면, 검은 구분선이 같은 SVG 좌표계를 사용한다.
+현재 단계에서는 왼쪽 더미 메뉴로 진입 애니메이션과 버튼 디자인만 확인한다.
-CSS는 색상, 호버, 텍스트 스타일, 외곽 표면만 담당한다.
-버튼 폭과 사선 좌표는 CategoryNav.js가 계산한다.
 */
+.main-portal .main-body-well > .main-guide-screen {
+    flex:1 1 0;
+    display:block;
+    position:relative;
+    width:100%;
+    height:auto;
+    min-height:0;
+    margin:0;
+    padding:0;
+    overflow:hidden;
+    background:transparent;
+    border:0;
+    box-shadow:none;
+    z-index:1;
+}
-.portal-category-nav {
+.main-portal .main-body-well > .main-guide-screen[hidden],
-position:relative;
+.main-portal .main-body-well > .main-manifesto[hidden] {
-width:100%;
+    display:none !important;
-height:var(--nav-h);
+}
-margin:0;
-padding:0;
-overflow:hidden;
-background:var(--surface-frame-soft);
+.main-portal .main-guide-menu {
-border:1px solid;
+    position:absolute;
-border-color:
+    top:10px;
-var(--edge-top)
+    left:10px;
-var(--edge-side)
+    width:230px;
-var(--edge-bottom)
+    margin:0;
-var(--edge-side);
+    padding:0;
-box-shadow:
+    display:flex;
-inset 0 1px 0 rgba(255,255,255,0.055),
+    flex-direction:column;
-inset 0 -1px 0 rgba(0,0,0,0.72);
+    gap:2px;
+    z-index:2;
 }
-.portal-category-svg {
+.main-portal .main-guide-menu-item {
-display:block;
+    width:230px;
-width:100%;
+    height:30px;
-height:100%;
+    margin:0;
+    padding:0;
+    opacity:0;
+    transform:translateX(-240px);
+    will-change:transform, opacity;
 }
-.portal-cat-shape {
+.main-portal .main-guide-screen.is-guide-menu-entering .main-guide-menu-item {
-fill:transparent;
+    animation:main-guide-menu-enter 260ms cubic-bezier(.16,.84,.24,1) both;
-stroke:none;
+    animation-delay:calc(var(--guide-menu-order) * 44ms);
-pointer-events:all;
 }
-.portal-cat-anchor:hover .portal-cat-shape {
+@keyframes main-guide-menu-enter {
-fill:rgba(255,255,255,0.035);
+% {
+        opacity:0;
+        transform:translateX(-240px);
+    }
+% {
+        opacity:1;
+        transform:translateX(4px);
+    }
+% {
+        opacity:1;
+        transform:translateX(0);
+    }
 }
-.portal-cat-anchor:active .portal-cat-shape {
+.main-portal .main-guide-menu-button {
-fill:rgba(0,0,0,0.20);
+    appearance:none;
+    -webkit-appearance:none;
+    display:grid;
+    grid-template-columns:30px minmax(0,1fr) 14px;
+    align-items:center;
+    width:230px;
+    height:30px;
+    margin:0;
+    padding:0;
+    overflow:hidden;
+    box-sizing:border-box;
+    color:#e2e2e2;
+    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;
+    font-family:inherit;
+    font-size:12px;
+    font-weight:700;
+    line-height:28px;
+    text-align:left;
+    text-shadow:1px 1px 0 #050505;
+    cursor:pointer;
 }
-.portal-cat-label {
+.main-portal .main-guide-menu-number {
-fill:var(--text-main);
+    display:block;
-font-size:10px;
+    width:30px;
-font-weight:700;
+    height:28px;
-font-family:inherit;
+    color:#8f8f8f;
-text-anchor:middle;
+    background:#101010;
-dominant-baseline:middle;
+    border-right:1px solid #050505;
-pointer-events:none;
+    box-shadow:inset 0 1px 0 #242424;
-paint-order:stroke;
+    line-height:28px;
-stroke:#000000;
+    text-align:center;
-stroke-width:2px;
-stroke-linejoin:round;
 }
-.portal-cat-anchor:hover .portal-cat-label {
+.main-portal .main-guide-menu-label {
-fill:#ffffff;
+    display:block;
+    min-width:0;
+    height:28px;
+    padding:0 8px;
+    overflow:hidden;
+    line-height:28px;
+    white-space:nowrap;
+    text-overflow:ellipsis;
 }
-.portal-cat-project-label {
+.main-portal .main-guide-menu-arrow {
-font-size:11px;
+    display:block;
-letter-spacing:0.2px;
+    width:14px;
+    height:28px;
+    color:#8f8f8f;
+    line-height:27px;
+    text-align:center;
 }
-.portal-cat-divider {
+.main-portal .main-guide-menu-button:hover,
-stroke:#050505;
+.main-portal .main-guide-menu-button:focus-visible {
-stroke-width:1;
+    color:#ffffff;
-shape-rendering:crispEdges;
+    background:#242424;
-vector-effect:non-scaling-stroke;
+    outline:0;
-pointer-events:none;
 }
-/* -----------------------------------------
+.main-portal .main-guide-menu-button:hover .main-guide-menu-number,
-. Main console
+.main-portal .main-guide-menu-button:focus-visible .main-guide-menu-number,
------------------------------------------ */
+.main-portal .main-guide-menu-button:hover .main-guide-menu-arrow,
+.main-portal .main-guide-menu-button:focus-visible .main-guide-menu-arrow {
+    color:#ffffff;
+}
-.main-portal .console {
+.main-portal .main-guide-menu-button:active {
-width:100%;
+    color:#e2e2e2;
-margin:0 0 var(--space-block);
+    background:#101010;
-padding: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 .console-body {
+@media (prefers-reduced-motion:reduce) {
-padding:var(--space-inner);
+    .main-portal .main-guide-screen.is-guide-menu-entering .main-guide-menu-item {
-background:var(--surface-frame);
+        animation:none;
+        opacity:1;
+        transform:none;
+    }
 }
-.main-portal .console-grid {
+/* -----------------------------------------
-display:grid;
+상단 카테고리 중앙 「프로젝트」 기둥 / 20260716
-grid-template-columns:minmax(0,1fr) 260px;
+-----------------------------------------
-gap:var(--space-inner);
+버튼 2개 - #1d1d1d 기둥 - 버튼 2개.
-align-items:stretch;
+CategoryPillar.js가 기존 project 버튼의 좌우 사선과 2px 간격을 그대로 사용한다.
+기둥은 같은 경사를 유지한 채 SVG의 위·아래로 3px 우물을 관통하며 외곽 프레임과 같은
+#1d1d1d 면에 직접 닿는다. 상하 외곽선은 두지 않아 하나의 패널로
+이어진다. 버튼과 접하는 좌우의 #050505 외곽선은 생략하되,
+기존 안쪽 방향성 광원선을 그 외곽선 좌표로 한 칸 이동한다.
+안쪽선이 있던 자리는 별도 선 없이 #1d1d1d 본체 면으로 돌아간다.
+*/
+.main-portal .portal-category-svg.has-category-pillar
+.portal-cat-anchor[data-category-key="project"],
+.main-portal .portal-category-svg.has-category-pillar
+.portal-category-pillar-source {
+    display:none !important;
+    pointer-events:none !important;
 }
-.main-portal .main-screen,
+.main-portal .portal-category-pillar {
-.main-portal .side-screen {
+    pointer-events:none;
-position:relative;
+    shape-rendering:crispEdges;
-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 .portal-category-pillar-surface {
-.main-portal .side-screen::before {
+    fill:#1d1d1d;
-content:"";
+    stroke:none;
-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 .portal-category-pillar-line {
-.main-portal .side-screen::after {
+    fill:none;
-content:"";
+    stroke-width:1;
-position:absolute;
+    vector-effect:non-scaling-stroke;
-inset:-40px 0;
+    shape-rendering:crispEdges;
-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 .portal-category-pillar-shadow {
-.main-portal .side-screen > * {
+    stroke:#101010;
-position:relative;
-z-index:3;
 }
-.main-portal .main-screen {
+.main-portal .portal-category-pillar-highlight {
-min-height:392px;
+    stroke:#555555;
-padding:var(--pad-panel);
-display:flex;
-flex-direction:column;
-justify-content:flex-start;
 }
-.main-portal .side-screen {
+.main-portal .portal-category-pillar-label {
-padding:var(--pad-panel);
+    fill:#e2e2e2;
-display:flex;
+    cursor:default;
-flex-direction:column;
+    pointer-events:none;
 }
 /* -----------------------------------------
-. Image feed
+상단 카테고리 하단 작품 버튼 / 20260721
------------------------------------------ */
+-----------------------------------------
+상단 카테고리 프레임은 001 기준의 완전한 사각 외곽을 유지한다.
+하단 작품 섹션은 상단 하부 프레임을 덮지 않는다.
+두 구조는 #050505 하부 외곽선 1px만 공유한다.
-.main-portal .image-feed {
+행 구조(비축소 CSS px):
-position:relative;
+- 공유 외곽선 1px
-width:100%;
+- 순수 #080808 우물 2px
-height:240px;
+- 버튼 외곽 22px
-min-height:240px;
+- 순수 #080808 우물 2px
-overflow:hidden;
+- 하단 프레임 8px
-border:1px solid var(--edge-soft);
+- SVG 전체 35px, margin-top:-1px, 실제 추가 높이 34px
-background:#030303;
+*/
-isolation:isolate;
+.main-portal > [data-component="portal-section-nav"] {
+    flex:0 0 35px !important;
+    display:block !important;
+    position:relative !important;
+    width:100% !important;
+    height:35px !important;
+    min-height:35px !important;
+    max-height:35px !important;
+    margin:-1px 0 0 !important;
+    padding:0 !important;
+    overflow:hidden !important;
+    z-index:2 !important;
+    background:transparent !important;
+    border:0 !important;
+    box-shadow:none !important;
+    isolation:auto !important;
 }
-.main-portal .feed-layer {
+.main-portal .portal-section-nav,
-position:absolute;
+.main-portal .portal-section-svg {
-inset:-12px;
+    display:block !important;
-z-index:1;
+    position:relative !important;
-opacity:0;
+    width:100% !important;
-background-size:cover;
+    height:35px !important;
-background-position:center center;
+    min-height:35px !important;
-background-repeat:no-repeat;
+    max-height:35px !important;
-filter:
+    margin:0 !important;
-brightness(0.78)
+    padding:0 !important;
-contrast(1.12)
+    overflow:hidden !important;
-saturate(0.78)
+    background:transparent !important;
-grayscale(0.16);
+    border:0 !important;
-transform:translate(0,0) scale(1.06);
+    box-shadow:none !important;
-transform-origin:center center;
-will-change:opacity, transform;
-animation-duration:24s;
-animation-timing-function:linear;
-animation-iteration-count:infinite;
 }
-.main-portal .feed-bg-001 {
+.main-portal .portal-section-frame-edge {
-background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-001.png');
+    fill:#050505;
+    stroke:none;
 }
-.main-portal .feed-bg-002 {
+.main-portal .portal-section-frame-surface {
-background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-002.png');
+    fill:#1d1d1d;
+    stroke:none;
 }
-.main-portal .feed-bg-003 {
+.main-portal .portal-section-frame-well {
-background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-003.png');
+    fill:#080808;
+    stroke:none;
 }
-.main-portal .feed-bg-004 {
+.main-portal .portal-section-frame-edge,
-background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-004.png');
+.main-portal .portal-section-frame-surface,
+.main-portal .portal-section-frame-well,
+.main-portal .portal-section-button-geometry .portal-cat-edge,
+.main-portal .portal-section-button-geometry .portal-cat-surface {
+    shape-rendering:crispEdges;
 }
-.main-portal .feed-layer-1 {
+.main-portal .portal-section-frame-highlight,
-animation-name:image-feed-drift-left;
+.main-portal .portal-section-frame-shadow,
-animation-delay:0s;
+.main-portal .portal-section-well-highlight,
+.main-portal .portal-section-well-shadow {
+    fill:none;
+    stroke-width:1;
+    vector-effect:non-scaling-stroke;
+    shape-rendering:crispEdges;
 }
-.main-portal .feed-layer-2 {
+.main-portal .portal-section-frame-highlight,
-animation-name:image-feed-drift-right;
+.main-portal .portal-section-well-highlight {
-animation-delay:6s;
+    stroke:#555555;
 }
-.main-portal .feed-layer-3 {
+.main-portal .portal-section-frame-shadow,
-animation-name:image-feed-drift-left;
+.main-portal .portal-section-well-shadow {
-animation-delay:12s;
+    stroke:#101010;
 }
-.main-portal .feed-layer-4 {
+.main-portal .portal-section-anchor,
-animation-name:image-feed-drift-right;
+.main-portal .portal-section-button-geometry {
-animation-delay:18s;
+    pointer-events:auto;
 }
-@keyframes image-feed-drift-left {
+.main-portal .portal-section-label {
-% { opacity:0; transform:translate(0,0) scale(1.06); }
+    fill:#e2e2e2;
-.166% { opacity:1; transform:translate(0,0) scale(1.06); }
-% { opacity:1; transform:translate(-22px,14px) scale(1.075); }
-.166% { opacity:0; transform:translate(-26px,16px) scale(1.078); }
-% { opacity:0; transform:translate(0,0) scale(1.06); }
 }
-@keyframes image-feed-drift-right {
+/* 선언문 전용 장식은 길라잡이 화면으로 넘어갈 때 함께 숨긴다. */
-% { opacity:0; transform:translate(0,0) scale(1.06); }
+.main-portal.is-guide-screen-active .main-body-well > .wiki-decoration,
-.166% { opacity:1; transform:translate(0,0) scale(1.06); }
+.main-portal.is-guide-screen-active .main-body-well > [data-wiki-decoration-rendered="1"] {
-% { opacity:1; transform:translate(22px,14px) scale(1.075); }
+    visibility:hidden !important;
-.166% { opacity:0; transform:translate(26px,16px) scale(1.078); }
+    pointer-events:none !important;
-% { opacity:0; transform:translate(0,0) scale(1.06); }
 }
-.main-portal .image-feed::before {
+@media screen and (max-width:700px) {
-content:"";
+    .main-portal .main-manifesto {
-position:absolute;
+        padding-top:10px;
-inset:0;
+        overflow-x:auto;
-z-index:5;
+        justify-content:flex-start;
-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;
+.main-portal [data-component="category-guide-nav"] {
-background:
+    flex:0 0 auto;
-repeating-linear-gradient(
+    display:block;
-to bottom,
+    width:100%;
-rgba(255,255,255,0.090) 0px,
+    height:65px;
-rgba(255,255,255,0.090) 1px,
+    margin:2px 0 0;
-transparent 2px,
+    padding:0;
-transparent 5px
+    position:relative;
-);
+    z-index:2147483000 !important;
-mix-blend-mode:screen;
+    pointer-events:auto;
 }
-.main-portal .feed-caption {
+.main-portal .portal-guide-nav {
-position:absolute;
+    width:100%;
-left:0;
+    height:65px;
-right:0;
+    margin:0;
-bottom:0;
+    background:var(--well, #080808);
-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 {
+.main-portal .portal-guide-svg {
-min-width:0;
+    width:100%;
-overflow:hidden;
+    height:65px;
-text-overflow:ellipsis;
-white-space:nowrap;
 }
-.main-portal .feed-caption span:last-child {
+.main-portal .portal-guide-label {
-flex:0 0 auto;
+    fill:#e2e2e2;
-color:var(--text-dim);
+}
+/* 본문 데코가 별도 stacking context를 만들더라도 길라잡이 클릭면을 최상단에 유지한다. */
+.main-portal .portal-guide-nav,
+.main-portal .portal-guide-svg,
+.main-portal .portal-guide-anchor {
+    position:relative;
+    z-index:2147483000 !important;
 }
 /* -----------------------------------------
-. Statement plate
+대문 본문 패널 / 실제 래퍼·데코 클리핑
------------------------------------------ */
+-----------------------------------------
+구조:
+로고 → 상단 버튼 → #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 .statement-plate {
+/* 길라잡이는 우물 최하단의 정상 흐름 요소다. */
-margin:var(--space-inner) 0 0;
+.main-portal .main-body-well > [data-component="category-guide-nav"] {
-padding:13px 18px 12px;
+    flex:0 0 65px;
-border:1px solid var(--edge-soft);
+    display:block !important;
-background:#080808;
+    width:100% !important;
+    min-width:0 !important;
+    max-width:none !important;
+    height:65px !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 .statement-plate h2 {
+.main-portal .main-body-well .portal-guide-nav,
-margin:0 0 10px !important;
+.main-portal .main-body-well .portal-guide-svg,
-padding:0 0 8px !important;
+.main-portal .main-body-well .portal-guide-anchor {
-border-bottom:1px solid var(--edge-soft) !important;
+    position:relative;
-color:#f4f4f4 !important;
+    z-index:2147483000 !important;
-font-size:20px !important;
-line-height:1.25 !important;
-text-align:center !important;
-text-shadow:
-px 1px 0 #000,
-0 4px rgba(255,255,255,0.10) !important;
 }
-.main-portal .statement-plate p {
+/* 실패했던 display:contents 우회 구조는 사용하지 않는다. */
-max-width:820px;
+.main-portal > .main-body-panel,
-margin:0 auto 9px;
+.main-portal .main-body-well {
-color:#d8d8d8;
+    box-sizing:border-box;
-font-size:12px;
-line-height:1.68;
-text-align:center;
-text-shadow:1px 1px 0 #000;
 }
-.main-portal .statement-plate p:last-child {
+@media screen and (max-width:700px) {
-margin-bottom:0;
+    .main-portal .main-body-panel {
+        min-width:660px;
+    }
 }
 /* -----------------------------------------
-. Guestbook preview
+대문 높이 체인 / 외부 스크롤 완전 제거
------------------------------------------ */
+-----------------------------------------
+Layout.css의 .mw-parser-output은 일반 문서를 위해 overflow-y:auto이다.
+대문에서는 전체 패널이 남은 높이를 정확히 나눠 써야 하므로 예외 처리한다.
-.main-portal .screen-title {
+핵심:
-height:var(--screen-title-h);
+- 바깥 스크롤 박스 비활성화
-min-height:var(--screen-title-h);
+- 높이 전달 체인을 100%로 고정
-margin:0 0 var(--space-inner);
+- 각 세로 flex 구간을 flex:1 1 0으로 축소 가능하게 변경
-padding:0 7px;
+- min-height:0으로 min-content 높이 강제 확장을 차단
-display:flex;
+*/
-align-items:center;
+body.action-view.clbi-main-page .liberty-content-main,
-justify-content:space-between;
+body.action-view.clbi-main-page .liberty-content-main > #mw-content-text,
-gap:6px;
+body.action-view.clbi-main-page .liberty-content-main > .mw-body-content,
-border:1px solid var(--edge-soft);
+body.action-view.clbi-main-page .liberty-content-main #mw-content-text,
-background:#151515;
+body.action-view.clbi-main-page .liberty-content-main .mw-body-content,
-color:#f0f0f0;
+body.action-view.clbi-main-page .liberty-content-main .mw-parser-output {
-font-size:10px;
+    min-height:0 !important;
-font-weight:700;
+    overflow:hidden !important;
-line-height:1;
-text-shadow:1px 1px 0 #000;
 }
-.main-portal .screen-title span:last-child {
+body.action-view.clbi-main-page .liberty-content-main .mw-parser-output {
-color:var(--text-dim);
+    flex:1 1 0 !important;
-font-size:9px;
+    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;
 }
-.main-portal .guestbook-device {
+body.action-view.clbi-main-page .liberty-content-main .mw-parser-output::-webkit-scrollbar {
-flex:1 1 auto;
+    display:none !important;
-min-height:0;
+    width:0 !important;
-display:flex;
+    height:0 !important;
-flex-direction:column;
-gap:var(--space-inner);
 }
-.main-portal .guestbook-messages {
+body.action-view.clbi-main-page .liberty-content-main .mw-parser-output > .main-portal {
-flex:1 1 auto;
+    flex:1 1 0 !important;
-min-height:0;
+    width:100% !important;
-border-top:1px solid var(--edge-soft);
+    height:100% !important;
-border-bottom:1px solid var(--edge-soft);
+    min-height:0 !important;
-overflow:hidden;
+    max-height:100% !important;
+    overflow:hidden !important;
 }
-.main-portal .guestbook-message {
+body.action-view.clbi-main-page .main-portal {
-padding:6px 2px;
+    flex:1 1 0 !important;
-border-bottom:1px solid var(--edge-soft);
+    height:100% !important;
+    min-height:0 !important;
+    max-height:100% !important;
+    overflow:hidden !important;
 }
-.main-portal .guestbook-message:last-child {
+body.action-view.clbi-main-page .main-portal .main-body-panel {
-border-bottom:none;
+    flex:1 1 0 !important;
+    height:auto !important;
+    min-height:0 !important;
+    max-height:none !important;
+    overflow:hidden !important;
 }
-.main-portal .guestbook-message:hover {
+body.action-view.clbi-main-page .main-portal .main-body-well {
-background:#111111;
+    flex:1 1 0 !important;
+    height:auto !important;
+    min-height:0 !important;
+    max-height:none !important;
+    overflow:hidden !important;
 }
-.main-portal .guestbook-message-head {
+body.action-view.clbi-main-page .main-portal .main-body-well > .main-manifesto {
-display:flex;
+    flex:1 1 0 !important;
-align-items:center;
+    height:auto !important;
-justify-content:space-between;
+    min-height:0 !important;
-gap:6px;
+    max-height:none !important;
-margin-bottom:3px;
+    overflow:hidden !important;
-font-size:9px;
-line-height:1.2;
 }
-.main-portal .guestbook-name {
+/* 길라잡이는 42px 본체·광원 + 상하 1px #050505 외곽선으로 44px이다.
-color:#eeeeee;
+   상하 2px #080808 간격, 상단 9px·하단 8px 프레임을 포함한 전체 행은 65px이다.
-font-weight:700;
+   상단 9px 중 외곽선·광원선을 제외한 #1d1d1d 실색 영역은 7px이다. */
-white-space:nowrap;
+body.action-view.clbi-main-page
+.main-portal
+.main-body-well > [data-component="category-guide-nav"] {
+    flex:0 0 65px !important;
 }
-.main-portal .guestbook-time {
+/* -----------------------------------------
-color:var(--text-dim);
+버튼 프레임 / 상단 유지·하단 연속 용접
-white-space:nowrap;
+-----------------------------------------
+상단 총 36px:
+px 프레임 + 2px #080808 + 24px 버튼 + 2px #080808 + 4px 프레임
+하단 총 65px:
+중앙에서 위로 솟은 패널 하단 프레임 + 2px #080808
++ 44px 길라잡이 외곽 + 2px #080808 + 공유 하단 프레임
+하단은 별도 ㄷ자 상자가 아니다.
+본문 패널의 하단 외곽선 자체가 중앙에서 사선으로 올라갔다 내려오는
+하나의 연속된 프레임이다.
+*/
+/* ─────────────────────────────────────────
+상단: 버튼 24px / 프레임과 2px 간격을 실제로 확보
+───────────────────────────────────────── */
+.main-portal > [data-component="category-nav"] {
+    flex:none !important;
+    display:block !important;
+    width:100% !important;
+    height:auto !important;
+    min-height:0 !important;
+    max-height:none !important;
+    margin:0 !important;
+    padding:8px !important;
+    position:relative !important;
+    overflow:hidden !important;
+    isolation:isolate !important;
+    box-sizing:border-box !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;
 }
-.main-portal .guestbook-text {
+.main-portal > [data-component="category-nav"] > .portal-category-nav {
-color:var(--text-soft);
+    display:block !important;
-font-size:10px;
+    position:relative !important;
-line-height:1.45;
+    width:100% !important;
-word-break:keep-all;
+    height:auto !important;
+    min-height:0 !important;
+    max-height:none !important;
+    margin:0 !important;
+    padding:2px !important;
+    overflow:hidden !important;
+    box-sizing:border-box !important;
+    background:#080808 !important;
+    border:0 !important;
+    /* 2px 간격은 순수 #080808이며 별도 광원선을 두지 않는다. */
+    box-shadow:none !important;
 }
-.main-portal .guestbook-form {
+.main-portal > [data-component="category-nav"] .portal-category-svg {
-display:grid;
+    display:block !important;
-grid-template-columns:minmax(0,1fr) 48px;
+    position:relative !important;
-gap:var(--space-tight);
+    inset:auto !important;
+    width:100% !important;
+    height:24px !important;
+    min-height:24px !important;
+    max-height:24px !important;
+    overflow:visible !important;
 }
-.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;
+body.action-view.clbi-main-page .main-portal .main-body-panel,
-overflow:hidden;
+.main-portal .main-body-panel {
-white-space:nowrap;
+    padding:9px !important;
-text-overflow:ellipsis;
+    border-bottom:0 !important;
+    box-shadow:
+        inset 0 1px 0 #555555,
+        inset -1px 0 0 #555555,
+        inset 1px 0 0 #101010 !important;
 }
-.main-portal .guestbook-input:hover {
+.main-portal .main-body-panel > [data-component="category-guide-nav"] {
-background:#0c0c0c;
+    display:block !important;
-color:#8f8f8f;
+    position:absolute !important;
+    left:0 !important;
+    right:0 !important;
+    bottom:0 !important;
+    width:auto !important;
+    height:65px !important;
+    min-height:65px !important;
+    max-height:65px !important;
+    margin:0 !important;
+    padding:0 !important;
+    overflow:visible !important;
+    isolation:isolate !important;
+    z-index:2147483000 !important;
+    pointer-events:auto !important;
+    background:transparent !important;
+    border:0 !important;
+    box-shadow:none !important;
 }
-.main-portal .guestbook-submit {
+.main-portal .main-body-panel > [data-component="category-guide-nav"] > .portal-guide-nav,
-height:24px;
+.main-portal .main-body-panel > [data-component="category-guide-nav"] .portal-guide-svg {
-display:flex;
+    display:block !important;
-align-items:center;
+    position:absolute !important;
-justify-content:center;
+    inset:0 !important;
-border:1px solid var(--edge-soft);
+    width:100% !important;
-background:#161616;
+    height:65px !important;
-color:var(--text-soft);
+    min-height:65px !important;
-font-size:9px;
+    max-height:65px !important;
-font-weight:700;
+    margin:0 !important;
-line-height:1;
+    padding:0 !important;
-text-shadow:1px 1px 0 #000;
+    overflow:visible !important;
+    background:transparent !important;
+    border:0 !important;
+    box-shadow:none !important;
+    z-index:2147483000 !important;
 }
-.main-portal .guestbook-submit:hover {
+/* 기본 하단 프레임 + 중앙 돌출 프레임 */
-background:#222222;
+.main-portal .portal-guide-panel-bottom-surface,
-color:#ffffff;
+.main-portal .portal-guide-weld-outer {
+    fill:#1d1d1d;
+    stroke:none;
 }
-/* -----------------------------------------
+.main-portal .portal-guide-weld-well {
-. Ticker
+    fill:#080808;
------------------------------------------ */
+    stroke:none;
+}
-.main-portal .ticker {
+.main-portal .portal-guide-panel-bottom-edge,
-height:var(--ticker-h);
+.main-portal .portal-guide-weld-edge {
-margin:0 0 var(--space-inner);
+    stroke:#050505;
-padding:0 var(--pad-panel);
+    stroke-width:1;
-color:#bdbdbd;
+    fill:none;
-background:#171717;
+    vector-effect:non-scaling-stroke;
-font-size:10px;
+    shape-rendering:crispEdges;
-line-height:var(--ticker-h);
-white-space:nowrap;
-overflow:hidden;
-text-overflow:ellipsis;
-text-shadow:1px 1px 0 #000;
 }
-/* -----------------------------------------
+/* 하단 기본 프레임: 상단만 #555555, 하단만 #101010. */
-. Module grid
+.main-portal .portal-guide-panel-bottom-highlight,
------------------------------------------ */
+.main-portal .portal-guide-panel-bottom-shadow,
+.main-portal .portal-guide-weld-shadow,
+.main-portal .portal-guide-panel-bottom-inner {
+    stroke:#101010;
+    stroke-width:1;
+    fill:none;
+    vector-effect:non-scaling-stroke;
+    shape-rendering:crispEdges;
+}
-.main-portal .module-grid {
+/* 실제 길라잡이 버튼 외곽은 44px 사다리꼴이다. 바깥 돌출 프레임만 하단 기본 프레임과 용접된다. */
-display:grid;
+.main-portal .portal-guide-nav.is-continuous-weld
-grid-template-columns:minmax(0,1fr) minmax(0,1fr) 280px;
+.portal-cat-inset-bottom {
-gap:var(--space-inner);
+    display:block !important;
-align-items:stretch;
 }
-.main-portal .panel,
+/*
-.main-portal .instrument-panel {
+길라잡이 진입 상태:
-min-width:0;
+- 전체 좌표계가 65px에서 45px로 실제 축소된다.
-height:100%;
+- 중앙 버튼은 44px에서 24px으로만 줄고, #1d1d1d 실면 7px의 9/8px 프레임은 유지한다.
-display:flex;
+- 좌우 우물은 중앙 버튼과 접합되는 단일 메인 프레임이 하단에서 올라와 메운다.
-flex-direction:column;
+*/
+.main-portal .portal-guide-button-geometry {
+    transform:none;
 }
-.main-portal .panel-body,
+.main-portal .portal-guide-rising-main-frame {
-.main-portal .instrument-body {
+    transform-box:fill-box;
-flex:1 1 auto;
+    transform-origin:center bottom;
-min-height:0;
-padding:var(--pad-panel);
-background:var(--surface-well);
 }
-/* -----------------------------------------
+.main-portal .portal-guide-rising-main-frame-edge {
-. Record modules
+    fill:#050505;
------------------------------------------ */
+    stroke:none;
+    shape-rendering:crispEdges;
+}
-.main-portal .record-list {
+.main-portal .portal-guide-rising-main-frame-surface {
-margin:0 !important;
+    fill:#1d1d1d;
-padding:0 !important;
+    stroke:none;
-list-style:none !important;
+    shape-rendering:crispEdges;
 }
-.main-portal .record-list li {
+.main-portal .portal-guide-rising-main-frame-highlight-top,
-display:grid;
+.main-portal .portal-guide-rising-main-frame-highlight-left {
-grid-template-columns:minmax(0,1fr) auto;
+    fill:#555555;
-align-items:center;
+    stroke:none;
-gap:var(--space-block);
+    shape-rendering:crispEdges;
-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 {
+.main-portal .portal-guide-rising-main-frame-shadow-right,
-border-top:1px solid var(--edge-soft);
+.main-portal .portal-guide-rising-main-frame-shadow-bottom {
+    fill:#101010;
+    stroke:none;
+    shape-rendering:crispEdges;
 }
-.main-portal .record-list li:hover {
+/* 예전 우물 내부 mount 규칙 차단 */
-background:#151515;
+.main-portal .main-body-well > [data-component="category-guide-nav"],
-color:#ffffff;
+body.action-view.clbi-main-page
+.main-portal
+.main-body-well > [data-component="category-guide-nav"] {
+    flex:none !important;
+    width:0 !important;
+    height:0 !important;
+    min-height:0 !important;
+    max-height:0 !important;
+    margin:0 !important;
+    padding:0 !important;
+    overflow:hidden !important;
 }
-.main-portal .record-list li span:first-child {
+@media screen and (max-width:700px) {
-min-width:0;
+    .main-portal > [data-component="category-nav"],
-overflow:hidden;
+    .main-portal .main-body-panel {
-text-overflow:ellipsis;
+        min-width:660px !important;
-white-space:nowrap;
+    }
 }
-.main-portal .meta {
-color:var(--text-dim);
-white-space:nowrap;
+/* -----------------------------------------
-font-size:9px;
+광원선 중복 방지 확정 규칙
-line-height:1;
+-----------------------------------------
+#555555는 독립된 #1d1d1d 돌출면의 상단·우측에만 사용한다.
+#101010은 같은 면의 좌측·하단에만 사용한다.
+#080808 우물과 2px 간격에는 광원선을 추가하지 않는다.
+*/
+.main-portal > [data-component="category-nav"] > .portal-category-nav {
+    box-shadow:none !important;
 }
-.main-portal .record-list li:hover .meta {
+/* 본문 우물은 오목한 방향성 선을 유지한다. */
-color:#c0c0c0;
+.main-portal .main-body-well {
+    box-shadow:
+        inset 0 1px 0 #101010,
+        inset -1px 0 0 #101010,
+        inset 1px 0 0 #555555,
+        inset 0 -1px 0 #555555 !important;
 }
 /* -----------------------------------------
-. Status tags
+프레임 안쪽선·하단 아치 오버레이 확정 규칙
------------------------------------------ */
+-----------------------------------------
+상단:
+- 기존 구조와 치수 유지
+- #1d1d1d 프레임의 안쪽 경계에 방향성 1px 선 추가
+- 안쪽 우물 경계는 상단/우측 #101010, 좌측/하단 #555555
+- 선은 프레임의 마지막 1px에 놓여 2px #080808 간격을 침범하지 않음
+하단:
+- main-body-panel의 원래 전체 프레임을 그대로 복구
+- SVG는 전체 하단 프레임을 다시 그리지 않음
+- 버튼과 하부를 비운 중앙 아치형 프레임 조각만 기존 프레임 위에 얹음
+*/
+/* 상단 외곽 프레임의 안쪽 우물 경계
+   우물은 오목하므로 돌출면과 반대 방향이다.
+   상단/우측 #101010, 좌측/하단 #555555. */
+.main-portal > [data-component="category-nav"]::after {
+    content:"";
+    display:block;
+    position:absolute;
+    inset:8px;
+    z-index:3;
+    pointer-events:none;
+    box-sizing:border-box;
+    border-style:solid;
+    border-width:1px;
+    border-color:#101010 #101010 #555555 #555555;
+}
-.main-portal .status-tag {
+/* 2px 우물 간격과 버튼은 안쪽선보다 아래 레이어에 둔다. */
-display:inline-flex;
+.main-portal > [data-component="category-nav"] > .portal-category-nav {
-align-items:center;
+    z-index:1 !important;
-justify-content:center;
+    box-shadow:none !important;
-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 {
+.main-portal > [data-component="category-nav"] .portal-category-svg {
-border-color:#6d5b2c;
+    z-index:1 !important;
-background:#19170f;
 }
-.main-portal .status-tag.is-review {
+/* 기존 본문 패널의 전체 프레임을 복구한다. */
-border-color:#36515d;
+body.action-view.clbi-main-page .main-portal .main-body-panel,
-background:#10171a;
+.main-portal .main-body-panel {
+    padding:9px !important;
+    border:1px solid #050505 !important;
+    box-shadow:
+        inset 0 1px 0 #555555,
+        inset -1px 0 0 #555555,
+        inset 1px 0 0 #101010,
+        inset 0 -1px 0 #101010 !important;
 }
-.main-portal .status-tag.is-wait {
+/* 아치 오버레이 좌표계. 패널 하부 자체는 투명하게 둔다. */
-border-color:#484848;
+.main-portal .main-body-panel > [data-component="category-guide-nav"] {
-background:#151515;
+    height:65px !important;
+    min-height:65px !important;
+    max-height:65px !important;
+    background:transparent !important;
+    border:0 !important;
+    box-shadow:none !important;
 }
-.main-portal .status-tag.is-done {
+.main-portal .main-body-panel > [data-component="category-guide-nav"] > .portal-guide-nav,
-border-color:#3d5c38;
+.main-portal .main-body-panel > [data-component="category-guide-nav"] .portal-guide-svg {
-background:#111811;
+    height:65px !important;
+    min-height:65px !important;
+    max-height:65px !important;
+    background:transparent !important;
+    border:0 !important;
+    box-shadow:none !important;
 }
-.main-portal .status-tag.is-alert {
+/* 아치 프레임 면과 내부 우물 */
-border-color:#6a3933;
+.main-portal .portal-guide-arch-outer {
-background:#1b1110;
+    fill:#1d1d1d;
+    stroke:none;
 }
-/* -----------------------------------------
+.main-portal .portal-guide-arch-well {
-. Team work module
+    fill:#080808;
------------------------------------------ */
+    stroke:none;
+}
-.main-portal .team-panel .panel-body {
+/* 아치의 최외곽: 상단과 양쪽 사선만 */
-position:relative;
+.main-portal .portal-guide-arch-edge {
-padding-left:15px;
+    stroke:#050505;
+    stroke-width:1;
+    fill:none;
+    vector-effect:non-scaling-stroke;
+    shape-rendering:crispEdges;
 }
-.main-portal .team-panel .panel-body::before {
+/* 바깥 돌출면의 광원 */
-content:"";
+.main-portal .portal-guide-arch-highlight {
-position:absolute;
+    stroke:#555555;
-left:6px;
+    stroke-width:1;
-top:8px;
+    fill:none;
-bottom:8px;
+    vector-effect:non-scaling-stroke;
-width:4px;
+    shape-rendering:crispEdges;
-pointer-events:none;
-background:
-repeating-linear-gradient(
-deg,
-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 {
+.main-portal .portal-guide-arch-shadow {
-color:#c6c6c6;
+    stroke:#101010;
+    stroke-width:1;
+    fill:none;
+    vector-effect:non-scaling-stroke;
+    shape-rendering:crispEdges;
 }
-/* -----------------------------------------
-. Status instrument
------------------------------------------ */
-.main-portal .instrument-grid {
+/* 버튼과 마주 보는 하단 본문 프레임의 상단 1px만 담당한다.
-display:grid;
+   선 stroke가 아니라 정수 좌표의 1px rect이므로 2px로 번지지 않는다. */
-grid-template-columns:minmax(0,1fr) minmax(0,1fr);
+.main-portal .portal-guide-facing-highlight {
-gap:var(--space-inner);
+    fill:#555555;
-margin:0 0 var(--space-inner);
+    stroke:none;
+    shape-rendering:crispEdges;
 }
-.main-portal .gauge {
+/* 아치 안쪽 우물 경계: 상단/우측 어두움, 좌측 밝음. 하부는 열림. */
-height:var(--gauge-h);
+.main-portal .portal-guide-arch-inner-highlight {
-min-width:0;
+    stroke:#101010;
-padding:6px;
+    stroke-width:1;
-display:flex;
+    fill:none;
-flex-direction:column;
+    vector-effect:non-scaling-stroke;
-align-items:center;
+    shape-rendering:crispEdges;
-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 {
+.main-portal .portal-guide-arch-inner-shadow {
-background:#0d0d0d;
+    stroke:#555555;
+    stroke-width:1;
+    fill:none;
+    vector-effect:non-scaling-stroke;
+    shape-rendering:crispEdges;
 }
-.main-portal .gauge b {
+/* 이전 SVG가 그리던 독립 하단 프레임은 강제로 숨긴다. */
-display:block;
+.main-portal .portal-guide-panel-bottom-surface,
-color:#f0f0f0;
+.main-portal .portal-guide-panel-bottom-edge,
-font-family:Consolas, Monaco, monospace !important;
+.main-portal .portal-guide-panel-bottom-highlight,
-font-size:18px;
+.main-portal .portal-guide-panel-bottom-shadow,
-line-height:1;
+.main-portal .portal-guide-panel-bottom-inner,
-text-shadow:1px 1px 0 #000;
+.main-portal .portal-guide-weld-outer,
+.main-portal .portal-guide-weld-well,
+.main-portal .portal-guide-weld-edge,
+.main-portal .portal-guide-weld-highlight,
+.main-portal .portal-guide-weld-shadow {
+    display:none !important;
 }
-.main-portal .gauge span {
+/* -----------------------------------------
-display:block;
+최종 시각 픽셀 보정 / 20260712
-margin-top:5px;
+-----------------------------------------
-color:var(--text-dim);
+목표는 선언값이 아니라 화면에서 보이는 색 면이다.
-font-size:9px;
-line-height:1;
+상단 카테고리:
+- 우물 inset 1px
+- 순수 #080808 간격 2px
+- 실제 버튼 22px
+- 기존 전체 행 높이는 유지
+본문 패널:
+- #050505 외곽선 1px
+- 방향성 inset 1px
+- 순수 #1d1d1d 면 7px
+- 내부 #080808 우물
+*/
+/* ─────────────────────────────────────────
+상단 카테고리: 실제 보이는 우물 간격 2px
+───────────────────────────────────────── */
+.main-portal > [data-component="category-nav"] {
+    padding:8px !important;
+    background:#1d1d1d !important;
+    border:1px solid #050505 !important;
+    box-shadow:
+        inset 0 1px 0 #555555,
+        inset -1px 0 0 #555555,
+        inset 1px 0 0 #101010,
+        inset 0 -1px 0 #101010 !important;
 }
-.main-portal .instrument-lines {
+/* 이전 border 기반 내부선은 코너 혼색을 만들므로 완전히 제거한다. */
-border-top:1px solid var(--edge-soft);
+.main-portal > [data-component="category-nav"]::after {
-border-bottom:1px solid var(--edge-soft);
+    content:none !important;
+    display:none !important;
+    border:0 !important;
+    box-shadow:none !important;
 }
-.main-portal .instrument-line {
+/*
-display:grid;
+우물 inset 1px + padding 3px.
-grid-template-columns:82px minmax(0,1fr);
+첫 1px은 inset이고, 그 뒤 순수 #080808이 정확히 2px 남는다.
-align-items:center;
+*/
-gap:6px;
+.main-portal > [data-component="category-nav"] > .portal-category-nav {
-height:22px;
+    display:block !important;
-min-height:22px;
+    position:relative !important;
-padding:0 2px;
+    width:100% !important;
-border-bottom:1px solid var(--edge-soft);
+    height:auto !important;
-font-size:10px;
+    margin:0 !important;
-line-height:1.2;
+    padding:3px !important;
+    box-sizing:border-box !important;
+    overflow:hidden !important;
+    background:#080808 !important;
+    border:0 !important;
+    box-shadow:
+        inset 0 1px 0 #101010,
+        inset -1px 0 0 #101010,
+        inset 1px 0 0 #555555,
+        inset 0 -1px 0 #555555 !important;
 }
-.main-portal .instrument-line:last-child {
+.main-portal > [data-component="category-nav"] .portal-category-svg {
-border-bottom:none;
+    display:block !important;
+    position:relative !important;
+    inset:auto !important;
+    width:100% !important;
+    height:22px !important;
+    min-height:22px !important;
+    max-height:22px !important;
+    overflow:visible !important;
 }
-.main-portal .instrument-line:hover {
+/* ─────────────────────────────────────────
-background:#151515;
+본문 패널: 순수 #1d1d1d 면 7px + 선명한 inset
+───────────────────────────────────────── */
+body.action-view.clbi-main-page .main-portal .main-body-panel,
+.main-portal .main-body-panel {
+    padding:8px !important;
+    position:relative !important;
+    background:#1d1d1d !important;
+    border:1px solid #050505 !important;
+    border-radius:0 !important;
+    box-shadow:none !important;
 }
-.main-portal .instrument-label {
+/*
-color:var(--text-dim);
+box-shadow 코너 중첩 대신 네 개의 불투명 1px 면을 직접 그린다.
-white-space:nowrap;
+첫 번째 레이어가 코너 우선권을 가진다.
+- 상단 #555555가 좌상단/우상단 우선
+- 우측 #555555가 우하단 우선
+- 좌측/하단 #101010
+*/
+body.action-view.clbi-main-page .main-portal .main-body-panel::before,
+.main-portal .main-body-panel::before {
+    content:"" !important;
+    display:block !important;
+    position:absolute !important;
+    inset:0 !important;
+    z-index:2147482990 !important;
+    pointer-events:none !important;
+    border:0 !important;
+    background:
+        linear-gradient(#555555,#555555) 0 0 / 100% 1px no-repeat,
+        linear-gradient(#555555,#555555) 100% 0 / 1px 100% no-repeat,
+        linear-gradient(#101010,#101010) 0 0 / 1px 100% no-repeat,
+        linear-gradient(#101010,#101010) 0 100% / 100% 1px no-repeat !important;
 }
-.main-portal .instrument-value {
+/* 본문 우물의 오목한 inset도 최종 규칙으로 고정한다. */
-color:var(--text-soft);
+.main-portal .main-body-well {
-white-space:nowrap;
+    background:#080808 !important;
-overflow:hidden;
+    border:0 !important;
-text-overflow:ellipsis;
+    box-shadow:
+        inset 0 1px 0 #101010,
+        inset -1px 0 0 #101010,
+        inset 1px 0 0 #555555,
+        inset 0 -1px 0 #555555 !important;
 }
-.main-portal .instrument-line:hover .instrument-value {
+/* -----------------------------------------
-color:#ffffff;
+본문 프레임 최종 시각 폭 7px
+-----------------------------------------
+inset은 layout 폭을 소비하지 않고 padding 면 위에 그려진다.
+따라서 순수 프레임 폭 7px 목표에는 padding 자체를 7px로 둔다.
+상단 버튼과 하단 아치 구조는 변경하지 않는다.
+*/
+body.action-view.clbi-main-page .main-portal .main-body-panel,
+.main-portal .main-body-panel {
+    /*
+    inset 1px이 프레임 면 위를 덮으므로 레이아웃 padding은 8px을 사용한다.
+    최종 화면에서 보이는 순수 #1d1d1d 면은 7px이다.
+    */
+    padding:8px !important;
 }
 /* -----------------------------------------
-. Footer split
+하단 아치 프레임 외곽·하단 안쪽선 정확 보정 / 20260712
------------------------------------------ */
+-----------------------------------------
+대상 구분:
+- 버튼 자체의 외곽 #050505는 유지
+- 아치형 바깥 프레임의 외부 #050505만 제거
+- 버튼 하단 inset은 기본 #101010 유지
+- 아치 프레임 하단 안쪽 면에만 #555555 1px 추가
+*/
-.main-portal .footer-grid {
+/* 버튼 자체는 원래 마감으로 복구한다. */
-display:grid;
+.main-portal .portal-guide-nav .portal-cat-edge {
-grid-template-columns:minmax(0,1fr) 300px;
+    fill:#050505 !important;
-gap:var(--space-inner);
-margin-top:var(--space-inner);
-align-items:stretch;
 }
-.main-portal .footer-grid .panel {
+.main-portal .portal-guide-nav .portal-cat-inset-bottom {
-height:100%;
+    stroke:#101010 !important;
 }
-.main-portal .manual-panel {
+/* 아치형 프레임 바깥의 #050505 외곽선만 제거한다. */
-margin-top:0;
+.main-portal .portal-guide-arch-edge {
+    display:none !important;
 }
-.main-portal .sample-row {
+/* 아치 프레임의 실제 하단 안쪽 면. 버튼과는 별도 요소다. */
-display:grid;
+.main-portal .portal-guide-arch-inner-bottom {
-grid-template-columns:150px minmax(0,1fr);
+    display:block !important;
-align-items:center;
+    fill:#555555 !important;
-gap:var(--space-inner);
+    stroke:none !important;
-min-height:24px;
+    shape-rendering:crispEdges;
-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 .portal-guide-panel-bottom-inner {
+    stroke:#101010 !important;
 }
-.main-portal .sample-row:hover {
-background:#151515;
+/* -----------------------------------------
+하단 길라잡이 통합 프레임 위치 확정 / 20260713
+본문 패널의 원래 하단 프레임은 분리하지 않는다.
+버튼·아치·클릭 영역만 현재 상태에서 1px 위로 이동한다.
+----------------------------------------- */
+.main-portal .main-body-panel > [data-component="category-guide-nav"] {
+    bottom:1px !important;
 }
-.main-portal .sample-label {
-color:var(--text-dim);
+/* -----------------------------------------
-font-size:10px;
+하단 중앙 접합: 애드온 프레임 1px 연장 / 20260713
-line-height:1.25;
+- 본문 패널의 원래 전체 프레임은 그대로 유지
+- 버튼과 좌·우·상단 아치 프레임만 애드온
+- 별도 #555555 하단선은 생성하지 않음
+- JS가 아치 외곽면만 아래로 1px 연장하여 원래 우물 하단선을 같은 행에서 덮음
+----------------------------------------- */
+.main-portal .portal-guide-arch-inner-bottom {
+    display:none !important;
 }
-.main-portal .sample-value {
-color:var(--text-soft);
+/* -----------------------------------------
-font-size:10px;
+대문 선언문 절차적 진입 애니메이션 / 20260713
-line-height:1.35;
+-----------------------------------------
+제목·구분선·본문 행은 실제 HTML 요소를 Web Animations API로 움직인다.
+CSS transition 클래스 전환에 의존하지 않아 초기 진입·새로고침·SPA에서
+최종 상태로 순간 점프하는 문제를 피한다.
+*/
+/*
+원문은 기본 표시 상태다.
+JS가 폰트·행 측정·구분선 DOM까지 모두 준비한 뒤 붙이는
+.manifesto-intro-prepared만 애니메이션의 초기 프레임을 소유한다.
+따라서 강력 새로고침이나 raw 스크립트 실패가 본문을 숨길 수 없다.
+*/
+.main-portal.manifesto-intro-prepared .main-manifesto-title {
+    position:relative !important;
+    opacity:0;
+    border-bottom:0 !important;
 }
-.main-portal .sample-row:hover .sample-value {
+.main-portal .main-manifesto-title {
-color:#ffffff;
+    position:relative !important;
+    border-bottom:0 !important;
+    box-shadow:none !important;
+    background-image:none !important;
+    text-decoration:none !important;
 }
-.main-portal .policy-list {
+.main-portal .main-manifesto-title::before,
-border-top:1px solid var(--edge-soft);
+.main-portal .main-manifesto-title::after {
-border-bottom:1px solid var(--edge-soft);
+    content:none !important;
+    display:none !important;
 }
-.main-portal .policy-row {
+.main-portal .main-manifesto-title > .manifesto-divider {
-display:grid;
+    display:block;
-grid-template-columns:minmax(0,1fr) 18px;
+    position:absolute;
-align-items:center;
+    left:0;
-gap:var(--space-inner);
+    right:0;
-height:24px;
+    bottom:0;
-padding:0 2px;
+    width:100%;
-border-bottom:1px solid var(--edge-soft);
+    height:1px;
-font-size:10px;
+    margin:0;
-line-height:1.2;
+    padding:0;
+    overflow:visible;
+    background:transparent !important;
+    border:0 !important;
+    box-shadow:none !important;
+    pointer-events:none;
+    z-index:4;
 }
-.main-portal .policy-row:last-child {
+/* ManifestoIntro가 소유권을 얻은 뒤에는 이전 구분선 소스를 모두 차단한다. */
-border-bottom:none;
+.main-portal.manifesto-divider-controlled .main-manifesto-title {
+    border-bottom:0 !important;
+    box-shadow:none !important;
+    background-image:none !important;
+    text-decoration:none !important;
 }
-.main-portal .policy-row:hover {
+.main-portal.manifesto-divider-controlled .main-manifesto-title::before,
-background:#151515;
+.main-portal.manifesto-divider-controlled .main-manifesto-title::after,
+.main-portal.manifesto-divider-controlled .main-manifesto-inner > hr,
+.main-portal.manifesto-divider-controlled .main-manifesto-divider,
+.main-portal.manifesto-divider-controlled [data-manifesto-divider-track] {
+    content:none !important;
+    display:none !important;
 }
-.main-portal .policy-row a {
+.main-portal .main-manifesto-title > .manifesto-divider > .manifesto-divider-half {
-display:block;
+    display:block;
-min-width:0;
+    position:absolute;
-overflow:hidden;
+    top:0;
-text-overflow:ellipsis;
+    width:50%;
-white-space:nowrap;
+    height:1px;
-color:var(--text-soft) !important;
+    margin:0;
+    padding:0;
+    background:#626262;
+    border:0;
+    box-shadow:none;
+    transform:scaleX(0);
+    will-change:transform;
 }
-.main-portal .policy-row:hover a {
+.main-portal .main-manifesto-title > .manifesto-divider > .manifesto-divider-left {
-color:#ffffff !important;
+    left:0;
-text-decoration:none !important;
+    transform-origin:100% 50%;
 }
-.main-portal .policy-mark {
+.main-portal .main-manifesto-title > .manifesto-divider > .manifesto-divider-right {
-color:var(--text-dim);
+    right:0;
-font-size:14px;
+    transform-origin:0 50%;
-line-height:1;
-white-space:nowrap;
-text-align:right;
 }
-.main-portal .policy-row:hover .policy-mark {
+/*
-color:#ffffff;
+제목 구분선이 완성된 뒤 같은 위치에서 분리되어 본문 하단까지 내려가는 실선.
+최종 이동 거리는 ManifestoIntro가 실제 렌더된 본문 높이를 정수 px로 측정한다.
+*/
+.main-portal .main-manifesto-inner > .manifesto-divider-drop {
+    display:block;
+    position:absolute;
+    left:0;
+    width:100%;
+    height:1px;
+    margin:0;
+    padding:0;
+    overflow:hidden;
+    background:#626262;
+    border:0;
+    box-shadow:none;
+    opacity:0;
+    transform:translateY(0);
+    will-change:transform, opacity;
+    pointer-events:none;
+    z-index:3;
 }
-.main-portal .social-strip {
+.main-portal .main-manifesto-copy.manifesto-line-measuring .manifesto-measure-token {
-display:grid;
+    display:inline;
-grid-template-columns:repeat(4,1fr);
+    white-space:normal;
-gap:var(--space-tight);
+    font:inherit;
-margin-top:var(--space-inner);
+    color:inherit;
 }
-.main-portal .social-icon {
+.main-portal .main-manifesto-copy .manifesto-line {
-display:block;
+    display:block;
-height:26px;
+    width:100%;
-min-width:0;
+    height:26px;
+    min-height:0;
+    max-height:26px;
+    margin:0;
+    padding:0;
+    overflow:visible;
+    opacity:1;
+    line-height:26px !important;
+    clip-path:inset(0 0 0 0);
+    will-change:height, max-height, opacity, clip-path;
 }
-.main-portal .social-icon a {
+.main-portal .main-manifesto-copy .manifesto-line-inner {
-display:flex !important;
+    display:block;
-align-items:center !important;
+    width:100%;
-justify-content:center !important;
+    height:26px;
-width:100% !important;
+    margin:0;
-height:26px !important;
+    padding:0;
-border:1px solid var(--edge-soft) !important;
+    line-height:26px !important;
-background:#111111 !important;
+    opacity:1;
-color:var(--text-soft) !important;
+    transform:translateY(0);
-font-size:10px !important;
+    will-change:transform, opacity;
-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 {
+.main-portal.manifesto-intro-prepared .main-manifesto-copy {
-background:#1c1c1c !important;
+    visibility:visible !important;
-color:#ffffff !important;
-border-color:#3a3a3a !important;
-text-decoration:none !important;
 }
-/* -----------------------------------------
+.main-portal.manifesto-intro-prepared .main-manifesto-copy .manifesto-line {
-. Responsive
+    height:0;
------------------------------------------ */
+    max-height:0;
+    overflow:hidden;
+    opacity:0;
+    clip-path:inset(0 0 100% 0);
+}
-@media screen and (max-width:1380px) {
+.main-portal.manifesto-intro-prepared .main-manifesto-copy .manifesto-line-inner {
-.main-portal .module-grid {
+    opacity:.18;
-grid-template-columns:minmax(0,1fr) minmax(0,1fr);
+    transform:translateY(-10px);
 }
-.main-portal .footer-grid {
+.main-portal.manifesto-intro-complete .main-manifesto-title {
-grid-template-columns:minmax(0,1fr);
+    opacity:1;
+    border-bottom:0 !important;
 }
+.main-portal.manifesto-intro-complete .main-manifesto-title > .manifesto-divider > .manifesto-divider-half {
+    transform:scaleX(1);
 }
-@media screen and (max-width:1180px) {
+.main-portal.manifesto-intro-complete .main-manifesto-copy .manifesto-line {
-.main-portal .console-grid {
+    height:26px;
-grid-template-columns:minmax(0,1fr);
+    max-height:26px;
+    overflow:visible;
+    opacity:1;
+    clip-path:inset(0 0 0 0);
 }
-.main-portal .module-grid {
+.main-portal.manifesto-intro-complete .main-manifesto-copy .manifesto-line-inner {
-grid-template-columns:minmax(0,1fr);
+    opacity:1;
+    transform:translateY(0);
 }
-.main-portal .notice-line {
+@media (prefers-reduced-motion:reduce) {
-grid-template-columns:62px minmax(0,1fr);
+    .main-portal.manifesto-intro-prepared .main-manifesto-title {
-min-height:32px;
+        opacity:1;
-}
+        border-bottom:0 !important;
+    }
+    .main-portal .main-manifesto-title > .manifesto-divider {
+        display:block !important;
+        left:0 !important;
+        width:100% !important;
+        background:transparent !important;
+    }
+    .main-portal .main-manifesto-title > .manifesto-divider > .manifesto-divider-half {
+        transform:scaleX(1) !important;
+    }
-.main-portal .notice-date,
+    .main-portal .main-manifesto-inner > .manifesto-divider-drop {
-.main-portal .notice-action {
+        opacity:1;
-display:none;
+    }
-}
-}
-/* -----------------------------------------
+    .main-portal.manifesto-intro-prepared .main-manifesto-copy .manifesto-line,
-Analog hover normalization
+    .main-portal.manifesto-intro-prepared .main-manifesto-copy .manifesto-line-inner {
------------------------------------------ */
+        height:26px;
-.main-portal a,
+        max-height:26px;
-.main-portal button,
+        overflow:visible;
-.main-portal .notice-line,
+        opacity:1;
-.main-portal .notice-line *,
+        clip-path:none;
-.main-portal .notice-action,
+        transform:none;
-.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;
 }