(Install package: clbiwiki-mainpage-divider-split-drop-hardrefresh-fix-20260713 / css/MainPage.css) |
(Install package: clbiwiki-mainpage-divider-two-line-controlled-fix-20260713 / css/MainPage.css) |
||
| 1,292번째 줄: | 1,292번째 줄: | ||
box-shadow:none !important; | box-shadow:none !important; | ||
pointer-events:none; | 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; | |||
} | } | ||
2026년 7월 13일 (월) 14:26 판
/* =========================================
COASTLINE: BLACK ICE - MainPage
로고 + 카테고리 네비 + 선언문 대문
========================================= */
/*
책임 범위
-----------------------------------------
- 대문 본문 .main-portal 내부만 담당한다.
- 사이트 공통 셸은 Layout.css가 담당한다.
- 카테고리 네비의 SVG 구조는 CategoryNav.js가 생성한다.
- 콘솔, 그래프, STATUS, INFORMATION, PROJECTS는 대문에서 제거한다.
- 「진창」 선언문 배치는 이 파일이 담당하며, 폰트 선언은 Theme.css가 담당한다.
*/
.main-portal {
--panel:#1d1d1d;
--well:#080808;
--edge:#050505;
--highlight:#555555;
--shadow:#101010;
--text:#e2e2e2;
--text-strong:#ffffff;
--block-gap:2px;
--frame:8px;
width:100%;
min-height:100%;
margin:0;
padding:0;
display:flex;
flex-direction:column;
color:var(--text);
background:transparent;
font-size:12px;
line-height:18px;
box-sizing:border-box;
}
body.action-view.clbi-main-page .liberty-content-main .mw-parser-output {
display:flex !important;
flex-direction:column !important;
}
body.action-view.clbi-main-page .liberty-content-main .mw-parser-output > .main-portal {
flex:1 0 auto;
min-height:0;
}
.main-portal *,
.main-portal *::before,
.main-portal *::after {
box-sizing:border-box;
}
.main-portal a,
.main-portal a:visited {
color:var(--text) !important;
text-decoration:none !important;
}
.main-portal a:hover,
.main-portal a:focus {
color:var(--text-strong) !important;
text-decoration:none !important;
}
/* 과거 대문 구조가 캐시에 남아 있어도 화면에는 나타나지 않게 한다. */
.main-portal > .console,
.main-portal > .portal-bottom-row,
.main-portal > [data-archive-graph] {
display:none !important;
}
/* -----------------------------------------
공통 돌출 프레임
----------------------------------------- */
.main-portal .lab-logo {
background:var(--panel, #1d1d1d);
border:1px solid var(--edge, #050505);
border-radius:0;
box-shadow:
inset 0 1px 0 var(--highlight, #555555),
inset -1px 0 0 var(--highlight, #555555),
inset 1px 0 0 var(--shadow, #101010),
inset 0 -1px 0 var(--shadow, #101010);
}
.main-portal .lab-logo {
flex:0 0 auto;
margin:0 0 var(--block-gap);
}
.main-portal [data-component="category-nav"] {
flex:0 0 auto;
display:block;
width:100%;
margin:0;
}
/* -----------------------------------------
로고 프레임
----------------------------------------- */
.main-portal .lab-logo {
padding:var(--frame);
overflow:hidden;
}
.main-portal .portal-logo-well {
min-height:86px;
padding:10px 8px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:var(--well);
border:0;
box-shadow:
inset 0 1px 0 var(--shadow),
inset -1px 0 0 var(--shadow),
inset 1px 0 0 var(--highlight),
inset 0 -1px 0 var(--highlight);
line-height:0;
}
.main-portal .portal-logo-well a,
.main-portal .portal-logo-well .mw-file-description {
display:inline-block;
line-height:0;
}
.main-portal .portal-logo-well img,
.main-portal .portal-logo-well .mw-file-element {
display:block;
width:1000px;
max-width:144%;
height:auto;
filter:grayscale(1) contrast(1.04) brightness(1.02);
}
/* -----------------------------------------
카테고리 네비
----------------------------------------- */
.portal-category-nav {
position:relative;
width:100%;
height:36px;
margin:0;
padding:0;
overflow:hidden;
background:var(--well, #080808);
border:0;
border-radius:0;
box-shadow:none;
}
.portal-category-svg {
display:block;
width:100%;
height:100%;
overflow:visible;
}
/*
각 버튼은 SVG 안에서 독립된 사선 프레임으로 그린다.
- 외곽 1px: #050505
- 본체: #1d1d1d
- 상단/우측 inset: #555555
- 좌측/하단 inset: #101010
- 버튼 사이 배경: #080808 2px
*/
.portal-cat-edge {
fill:#050505;
stroke:none;
}
.portal-cat-surface {
fill:#1d1d1d;
stroke:none;
}
.portal-cat-inset {
fill:none;
stroke-width:1;
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:57px !important;
min-height:57px !important;
max-height:57px !important;
margin:0 0 14px !important;
padding:0 0 8px !important;
overflow:visible !important;
clip:auto !important;
clip-path:none !important;
color:#e2e2e2 !important;
-webkit-text-fill-color:#e2e2e2 !important;
background:transparent !important;
border:0 !important;
/* 구분선은 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;
}
@media screen and (max-width:700px) {
.main-portal .main-manifesto {
padding-top:10px;
overflow-x:auto;
justify-content:flex-start;
}
}
/* -----------------------------------------
하단 길라잡이 버튼
-----------------------------------------
상단의 설정–프로젝트–기업 및 공동체 합산 폭을 공유한다.
사선 방향은 상단 묶음과 반대로, 넓은 변이 하단에 놓인다.
*/
.main-portal [data-component="category-guide-nav"] {
flex:0 0 auto;
display:block;
width:100%;
height:36px;
margin:2px 0 0;
padding:0;
position:relative;
z-index:2147483000 !important;
pointer-events:auto;
}
.main-portal .portal-guide-nav {
width:100%;
height:36px;
margin:0;
background:var(--well, #080808);
}
.main-portal .portal-guide-svg {
width:100%;
height:36px;
}
.main-portal .portal-guide-label {
fill:#e2e2e2;
}
/* 본문 데코가 별도 stacking context를 만들더라도 길라잡이 클릭면을 최상단에 유지한다. */
.main-portal .portal-guide-nav,
.main-portal .portal-guide-svg,
.main-portal .portal-guide-anchor {
position:relative;
z-index:2147483000 !important;
}
/* -----------------------------------------
대문 본문 패널 / 실제 래퍼·데코 클리핑
-----------------------------------------
구조:
로고 → 상단 버튼 → #1d1d1d 본문 프레임
└ #080808 우물
├ 선언문
├ 대문 데코
└ 길라잡이
외곽 프레임과 내부 우물 모두 paint를 잘라낸다.
따라서 데코는 저장된 좌표와 z-index에 관계없이
#1d1d1d 프레임의 경계를 넘어 보일 수 없다.
*/
.main-portal .main-body-panel {
flex:1 0 auto;
min-height:0;
width:100%;
margin:2px 0 0;
padding:9px;
position:relative;
display:flex;
flex-direction:column;
overflow:hidden;
isolation:isolate;
background:#1d1d1d;
border:1px solid #050505;
border-radius:0;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
}
.main-portal .main-body-well {
flex:1 0 auto;
min-height:0;
width:100%;
position:relative;
display:flex;
flex-direction:column;
overflow:hidden;
isolation:isolate;
background:#080808;
border:0;
/* 오목한 우물의 안쪽 경계: 상단/우측 어둡게, 좌측/하단 밝게. */
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
}
/* 기존 선언문 좌표와 폭은 유지하되 새 우물 안의 흐름 요소로 둔다. */
.main-portal .main-body-well > .main-manifesto {
flex:1 0 auto;
min-height:0;
width:100%;
margin:0 !important;
/*
길라잡이 하단에 추가한 3px을 전체 높이에 더하지 않는다.
기존 하단 여유 24px 안에서 3px을 넘겨 전체 패널 높이를 보존한다.
*/
padding:10px 0 21px !important;
position:relative !important;
top:auto !important;
left:auto !important;
overflow:visible !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
transform:none !important;
z-index:1;
}
/*
대문 장식 렌더러가 일반 장식을 이 우물의 직접 자식으로 넣는다.
position:absolute를 보장하고, 우물 overflow:hidden으로 절단한다.
*/
.main-portal .main-body-well > .wiki-decoration,
.main-portal .main-body-well > [data-wiki-decoration-rendered="1"] {
position:absolute !important;
margin:0 !important;
max-width:none !important;
max-height:none !important;
}
/* 길라잡이는 우물 최하단의 정상 흐름 요소다. */
.main-portal .main-body-well > [data-component="category-guide-nav"] {
flex:0 0 36px;
display:block !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
height:44px !important;
/*
위쪽은 2px.
아래쪽은 우물의 1px inset을 제외하고 순수 #080808이 2px 보이도록
CSS margin-bottom을 3px로 둔다.
*/
margin:2px 0 3px !important;
padding:0 !important;
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
pointer-events:auto !important;
}
.main-portal .main-body-well .portal-guide-nav,
.main-portal .main-body-well .portal-guide-svg,
.main-portal .main-body-well .portal-guide-anchor {
position:relative;
z-index:2147483000 !important;
}
/* 실패했던 display:contents 우회 구조는 사용하지 않는다. */
.main-portal > .main-body-panel,
.main-portal .main-body-well {
box-sizing:border-box;
}
@media screen and (max-width:700px) {
.main-portal .main-body-panel {
min-width:660px;
}
}
/* -----------------------------------------
대문 높이 체인 / 외부 스크롤 완전 제거
-----------------------------------------
Layout.css의 .mw-parser-output은 일반 문서를 위해 overflow-y:auto이다.
대문에서는 전체 패널이 남은 높이를 정확히 나눠 써야 하므로 예외 처리한다.
핵심:
- 바깥 스크롤 박스 비활성화
- 높이 전달 체인을 100%로 고정
- 각 세로 flex 구간을 flex:1 1 0으로 축소 가능하게 변경
- min-height:0으로 min-content 높이 강제 확장을 차단
*/
body.action-view.clbi-main-page .liberty-content-main,
body.action-view.clbi-main-page .liberty-content-main > #mw-content-text,
body.action-view.clbi-main-page .liberty-content-main > .mw-body-content,
body.action-view.clbi-main-page .liberty-content-main #mw-content-text,
body.action-view.clbi-main-page .liberty-content-main .mw-body-content,
body.action-view.clbi-main-page .liberty-content-main .mw-parser-output {
min-height:0 !important;
overflow:hidden !important;
}
body.action-view.clbi-main-page .liberty-content-main .mw-parser-output {
flex:1 1 0 !important;
height:100% !important;
max-height:100% !important;
display:flex !important;
flex-direction:column !important;
overflow-y:hidden !important;
overflow-x:hidden !important;
scrollbar-width:none !important;
}
body.action-view.clbi-main-page .liberty-content-main .mw-parser-output::-webkit-scrollbar {
display:none !important;
width:0 !important;
height:0 !important;
}
body.action-view.clbi-main-page .liberty-content-main .mw-parser-output > .main-portal {
flex:1 1 0 !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
max-height:100% !important;
overflow:hidden !important;
}
body.action-view.clbi-main-page .main-portal {
flex:1 1 0 !important;
height:100% !important;
min-height:0 !important;
max-height:100% !important;
overflow:hidden !important;
}
body.action-view.clbi-main-page .main-portal .main-body-panel {
flex:1 1 0 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
}
body.action-view.clbi-main-page .main-portal .main-body-well {
flex:1 1 0 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
}
body.action-view.clbi-main-page .main-portal .main-body-well > .main-manifesto {
flex:1 1 0 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
}
/* 길라잡이는 고정 36px이며 위 2px·아래 시각 2px 간격을 유지한다. */
body.action-view.clbi-main-page
.main-portal
.main-body-well > [data-component="category-guide-nav"] {
flex:0 0 36px !important;
}
/* -----------------------------------------
버튼 프레임 / 상단 유지·하단 연속 용접
-----------------------------------------
상단 총 36px:
4px 프레임 + 2px #080808 + 24px 버튼 + 2px #080808 + 4px 프레임
하단 총 36px:
중앙에서 위로 솟은 패널 하단 프레임 + 2px #080808
+ 24px 길라잡이 + 2px #080808 + 공유 하단 프레임 4px
하단은 별도 ㄷ자 상자가 아니다.
본문 패널의 하단 외곽선 자체가 중앙에서 사선으로 올라갔다 내려오는
하나의 연속된 프레임이다.
*/
/* ─────────────────────────────────────────
상단: 버튼 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:44px !important;
min-height:44px !important;
max-height:44px !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:36px !important;
min-height:44px !important;
max-height:44px !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;
}
/* 실제 버튼은 24px 사다리꼴이다. 바깥 돌출 프레임만 하단 기본 프레임과 용접된다. */
.main-portal .portal-guide-nav.is-continuous-weld
.portal-cat-inset-bottom {
display:block !important;
}
/* 예전 우물 내부 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:44px !important;
min-height:44px !important;
max-height:44px !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:44px !important;
min-height:44px !important;
max-height:44px !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;
}
}