참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
@import url('/index.php?title=MediaWiki:Template.Infobox.css&action=raw&ctype=text/css');
/* =========================================
Proitem Animation
========================================= */
.wip-stripe-layer {
position: absolute;
top: 0;
left: -280px;
width: calc(100% + 560px);
height: 100%;
opacity: 0.08;
background: repeating-linear-gradient(
45deg,
#969696,
#969696 10px,
transparent 10px,
transparent 20px
);
z-index: 0;
}
.wip-active .wip-stripe-layer {
animation: wip-stripe-move 8s linear infinite;
}
.wip-standby .wip-stripe-layer {
animation: none;
}
@keyframes wip-stripe-move {
from { transform: translateX(0); }
to { transform: translateX(280px); }
}
/* =========================================
Collapsible
========================================= */
[id^="collapsible"] {
overflow: hidden;
transition: max-height .25s ease;
max-height: 0;
}
/* =========================================
Color
========================================= */
.color-text {
color: var(--text-color);
}
.color-text a,
.color-text a:visited,
.color-text a:hover,
.color-text a:active {
color: var(--text-color) !important;
text-decoration-color: var(--text-color) !important;
}
/* =========================================
CRT Glitch Panel
========================================= */
.crt-glitch-panel {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: 5px;
box-shadow:
inset 0 0 18px rgba(255,255,255,0.04),
inset 0 0 42px rgba(133,67,105,0.10),
0 0 18px rgba(133,67,105,0.20);
}
.crt-glitch-panel .vanishing-grid-bg {
position: relative;
overflow: hidden;
border-radius: 5px;
background:
radial-gradient(circle at 50% 45%, rgba(212,90,162,0.18) 0%, transparent 32%),
linear-gradient(to bottom, #111 0%, #090909 58%, #030303 100%) !important;
}
.crt-glitch-panel > * {
position: relative;
z-index: 2;
}
.crt-glow-content {
position: relative;
z-index: 2;
text-shadow:
-1px 0 0 rgba(80,160,255,0.75),
1px 0 0 rgba(255,55,90,0.65),
2px 0 0 rgba(255,210,70,0.45),
0 0 2px rgba(255,255,255,0.35),
0 0 6px rgba(212,90,162,0.22),
0 0 12px rgba(133,67,105,0.18);
filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
}
.crt-glow-content::before {
content: "";
position: absolute;
inset: -24px;
z-index: -1;
pointer-events: none;
background:
radial-gradient(
circle at 50% 35%,
rgba(255,255,255,0.08) 0%,
rgba(212,90,162,0.10) 18%,
rgba(133,67,105,0.08) 34%,
transparent 68%
);
filter: blur(18px);
opacity: 0.75;
}
.crt-glitch-panel .fake-h1,
.crt-glitch-panel h1,
.crt-glitch-panel h2,
.crt-glitch-panel strong {
text-shadow:
-1px 0 0 rgba(80,160,255,0.95),
1px 0 0 rgba(255,55,90,0.85),
2px 0 0 rgba(255,210,70,0.55),
0 0 3px rgba(255,255,255,0.65),
0 0 10px rgba(255,255,255,0.28),
0 0 18px rgba(212,90,162,0.35),
0 0 32px rgba(133,67,105,0.24);
}
.crt-glitch-panel img {
filter:
drop-shadow(-1px 0 0 rgba(80,160,255,0.65))
drop-shadow(1px 0 0 rgba(255,55,90,0.55))
drop-shadow(2px 0 0 rgba(255,210,70,0.35))
drop-shadow(0 0 6px rgba(212,90,162,0.18));
}
.crt-glitch-panel::before {
content: "";
position: absolute;
inset: -80px 0;
z-index: 3;
pointer-events: none;
opacity: 0.22;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 1px,
transparent 2px,
transparent 5px
);
mix-blend-mode: screen;
animation: crt-scanlines-up 7s linear infinite;
}
.crt-glitch-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
to bottom,
transparent 0%,
rgba(255,255,255,0.18) 48%,
rgba(212,90,162,0.28) 50%,
rgba(90,120,255,0.16) 52%,
transparent 56%
);
mix-blend-mode: screen;
animation: crt-glitch-band-up 6.5s steps(1, end) infinite;
}
/* =========================================
Horizontal CRT Warp
========================================= */
.crt-horizontal-warp {
position: relative;
overflow: hidden;
isolation: isolate;
}
.crt-horizontal-warp .crt-glow-content {
animation: crt-base-drift 9s steps(1, end) infinite;
background-image:
repeating-linear-gradient(
to bottom,
rgba(120,180,255,0.00) 0px,
rgba(120,180,255,0.00) 3px,
rgba(120,180,255,0.05) 4px,
rgba(255,80,170,0.035) 5px,
rgba(120,180,255,0.00) 7px
);
background-blend-mode: screen;
}
.crt-horizontal-warp .crt-glow-content::after {
content: "";
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
to right,
transparent 0%,
rgba(120,180,255,0.18) 10%,
rgba(255,255,255,0.18) 48%,
rgba(212,90,162,0.20) 78%,
transparent 100%
);
mix-blend-mode: screen;
animation: crt-wide-horizontal-tear 3.8s steps(1, end) infinite;
}
/* =========================================
CRT Animations
========================================= */
@keyframes crt-scanlines-up {
from {
transform: translateY(0);
}
to {
transform: translateY(-80px);
}
}
@keyframes crt-glitch-band-up {
0%, 12%, 27%, 43%, 58%, 76%, 100% {
opacity: 0;
transform: translateY(100%);
}
13% {
opacity: 0.75;
transform: translateY(70%);
}
14% {
opacity: 0.15;
transform: translateY(62%) skewX(-2deg);
}
28% {
opacity: 0.55;
transform: translateY(35%);
}
29% {
opacity: 0.18;
transform: translateY(28%) skewX(2deg);
}
44% {
opacity: 0.65;
transform: translateY(10%);
}
45% {
opacity: 0.12;
transform: translateY(4%) skewX(-1deg);
}
59% {
opacity: 0.5;
transform: translateY(-20%);
}
60% {
opacity: 0.16;
transform: translateY(-26%) skewX(2deg);
}
77% {
opacity: 0.55;
transform: translateY(-55%);
}
78% {
opacity: 0;
transform: translateY(-70%);
}
}
@keyframes crt-base-drift {
0%, 88%, 100% {
transform: translateX(0);
filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
}
89% {
transform: translateX(-2px) skewX(-0.4deg);
filter:
contrast(1.08)
brightness(1.05)
drop-shadow(0 0 7px rgba(212,90,162,0.24));
}
90% {
transform: translateX(3px) skewX(0.5deg);
}
91% {
transform: translateX(-1px);
}
92% {
transform: translateX(0);
filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
}
}
@keyframes crt-wide-horizontal-tear {
0%, 8%, 17%, 29%, 43%, 61%, 78%, 100% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 0 0);
}
9% {
opacity: 0.45;
transform: translateX(-18px) skewX(-3deg);
clip-path: inset(18% 0 70% 0);
}
10% {
opacity: 0.28;
transform: translateX(24px) skewX(4deg);
clip-path: inset(21% 0 64% 0);
}
18% {
opacity: 0.38;
transform: translateX(32px) skewX(5deg);
clip-path: inset(42% 0 47% 0);
}
19% {
opacity: 0.16;
transform: translateX(-28px) skewX(-4deg);
clip-path: inset(46% 0 43% 0);
}
30% {
opacity: 0.48;
transform: translateX(-36px) skewX(-6deg);
clip-path: inset(58% 0 30% 0);
}
31% {
opacity: 0.18;
transform: translateX(20px) skewX(3deg);
clip-path: inset(61% 0 27% 0);
}
44% {
opacity: 0.36;
transform: translateX(18px) skewX(3deg);
clip-path: inset(8% 0 84% 0);
}
45% {
opacity: 0.12;
transform: translateX(-14px) skewX(-2deg);
clip-path: inset(11% 0 80% 0);
}
62% {
opacity: 0.44;
transform: translateX(-42px) skewX(-7deg);
clip-path: inset(73% 0 16% 0);
}
63% {
opacity: 0.18;
transform: translateX(30px) skewX(4deg);
clip-path: inset(76% 0 12% 0);
}
79% {
opacity: 0.42;
transform: translateX(26px) skewX(4deg);
clip-path: inset(31% 0 58% 0);
}
80% {
opacity: 0.14;
transform: translateX(-20px) skewX(-3deg);
clip-path: inset(34% 0 54% 0);
}
}
/* =========================================
Retro Horizon Grid Background
========================================= */
.retro-grid-bg {
position: relative;
overflow: hidden;
border-radius: 5px;
background:
linear-gradient(
to bottom,
rgba(13, 6, 19, 0.98) 0%,
rgba(25, 9, 33, 0.82) 44%,
rgba(53, 19, 56, 0.50) 60%,
rgba(4, 4, 7, 0.96) 61%,
rgba(2, 2, 4, 1) 100%
) !important;
}
.retro-grid-bg .crt-glow-content {
position: relative;
z-index: 5;
}
.retro-grid-bg::before {
content: "";
position: absolute;
left: -10%;
right: -10%;
top: 56%;
height: 16%;
z-index: 1;
pointer-events: none;
background:
radial-gradient(
ellipse at 50% 50%,
rgba(230,210,225,0.28) 0%,
rgba(204,94,168,0.30) 20%,
rgba(184,56,142,0.20) 44%,
transparent 76%
);
filter: blur(9px);
opacity: 0.68;
}
.retro-grid-bg::after {
content: "";
position: absolute;
left: 50%;
top: 61%;
width: 150%;
height: 115%;
z-index: 2;
pointer-events: none;
background-image:
linear-gradient(
to right,
rgba(204,64,156,0.72) 1px,
transparent 1px
),
linear-gradient(
to bottom,
rgba(204,64,156,0.70) 1px,
transparent 1px
);
background-size:
48px 100%,
100% 26px;
transform-origin: 50% 0%;
transform:
translateX(-50%)
perspective(430px)
rotateX(66deg);
opacity: 0.78;
filter:
drop-shadow(0 0 3px rgba(204,64,156,0.58))
drop-shadow(0 0 10px rgba(204,64,156,0.30));
animation: retro-grid-flow 1.8s linear infinite;
mask-image:
linear-gradient(
to bottom,
transparent 0%,
black 4%,
black 82%,
transparent 100%
);
-webkit-mask-image:
linear-gradient(
to bottom,
transparent 0%,
black 4%,
black 82%,
transparent 100%
);
}
.retro-grid-bg .crt-glow-content::before {
content: "";
position: absolute;
inset: -42px;
z-index: -1;
pointer-events: none;
background:
radial-gradient(
ellipse at 50% 56%,
rgba(220,220,225,0.05) 0%,
rgba(204,64,156,0.07) 22%,
rgba(96,152,204,0.05) 42%,
transparent 70%
);
filter: blur(20px);
opacity: 0.52;
}
@keyframes retro-grid-flow {
from {
background-position:
0 0,
0 0;
}
to {
background-position:
0 0,
0 -26px;
}
}
/* =========================================
CRT Monitor Frame
========================================= */
.crt-monitor-frame {
position: relative;
box-sizing: border-box;
padding: 34px 46px 38px 46px;
border-radius: 22px;
background:
linear-gradient(145deg, #303030 0%, #181818 22%, #080808 58%, #202020 100%);
border: 2px solid #2f2f2f;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.18),
inset 0 -3px 0 rgba(0,0,0,0.85),
inset 3px 0 0 rgba(255,255,255,0.06),
inset -3px 0 0 rgba(0,0,0,0.75),
0 0 0 3px #050505,
0 0 0 5px #242424,
0 12px 20px rgba(0,0,0,0.62),
0 24px 42px rgba(0,0,0,0.52),
0 42px 70px rgba(0,0,0,0.34);
}
.crt-monitor-frame::before {
content: "";
position: absolute;
inset: 0;
border-radius: 22px;
pointer-events: none;
opacity: 0.16;
background:
repeating-linear-gradient(
135deg,
rgba(255,255,255,0.035) 0px,
rgba(255,255,255,0.035) 1px,
transparent 1px,
transparent 5px
),
radial-gradient(
ellipse at 28% 12%,
rgba(255,255,255,0.12) 0%,
transparent 45%
);
mix-blend-mode: screen;
}
.crt-monitor-frame::after {
content: none;
}
.crt-monitor-inner {
position: relative;
box-sizing: border-box;
padding: 18px;
border-radius: 16px;
background:
linear-gradient(145deg, #050505 0%, #111 44%, #080808 100%);
border: 1px solid #050505;
box-shadow:
inset 0 5px 14px rgba(0,0,0,0.95),
inset 0 -2px 4px rgba(255,255,255,0.06),
inset 4px 0 10px rgba(0,0,0,0.85),
inset -4px 0 10px rgba(0,0,0,0.85),
0 1px 0 rgba(255,255,255,0.12);
}
.crt-monitor-screen {
position: relative;
overflow: hidden;
border-radius: 9px / 18px;
background: #050505;
border: 2px solid #050505;
box-shadow:
inset 0 0 0 2px #151515,
inset 0 0 22px rgba(0,0,0,0.95),
inset 0 0 48px rgba(0,0,0,0.75),
0 0 0 1px rgba(255,255,255,0.08),
0 0 18px rgba(133,67,105,0.18);
}
.crt-monitor-screen::before {
content: "";
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
border-radius: 9px / 18px;
background:
radial-gradient(
ellipse at 50% 50%,
transparent 0%,
transparent 58%,
rgba(0,0,0,0.22) 82%,
rgba(0,0,0,0.58) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.05) 18%,
transparent 38%,
transparent 100%
);
box-shadow:
inset 0 0 28px rgba(255,255,255,0.04),
inset 0 0 60px rgba(0,0,0,0.65);
}
.crt-monitor-screen .crt-glitch-panel,
.crt-monitor-screen .retro-grid-bg {
border-radius: 8px / 16px;
}
.crt-monitor-screen .crt-glitch-panel {
box-shadow: none;
}
#clbi-main-crt-hero-wrap {
width: 100%;
margin: 0 auto 14px auto;
}
#clbi-main-crt-hero {
width: 100%;
}
/* =========================================
Compact CRT Media Frame
========================================= */
.compact-crt-media {
position: relative;
box-sizing: border-box;
width: fit-content;
max-width: 100%;
margin: 6px auto;
padding: 10px 14px;
border-radius: 10px;
background:
linear-gradient(
145deg,
#242424 0%,
#141414 34%,
#080808 70%,
#171717 100%
);
border: 1px solid #2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
inset 0 -2px 0 rgba(0,0,0,0.82),
inset 2px 0 0 rgba(255,255,255,0.035),
inset -2px 0 0 rgba(0,0,0,0.62),
0 0 0 2px #050505,
0 0 0 3px #242424,
0 4px 12px rgba(0,0,0,0.68);
overflow: hidden;
}
.compact-crt-media .mw-default-size,
.compact-crt-media .mw-file-element,
.compact-crt-media img {
position: relative;
z-index: 1;
}
.compact-crt-media img {
max-width: 100%;
height: auto;
filter:
drop-shadow(0 1px 3px rgba(0,0,0,0.72))
drop-shadow(0 0 4px rgba(255,255,255,0.06));
animation: compact-crt-image-jitter 1.25s steps(1, end) infinite;
}
.compact-crt-media::before {
content: "";
position: absolute;
inset: 6px;
z-index: 3;
border-radius: 7px;
pointer-events: none;
background:
radial-gradient(
ellipse at 50% 50%,
transparent 0%,
transparent 54%,
rgba(0,0,0,0.20) 78%,
rgba(0,0,0,0.58) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.040) 18%,
transparent 38%,
transparent 100%
),
linear-gradient(
to bottom,
rgba(255,255,255,0.030) 0%,
transparent 34%,
rgba(0,0,0,0.26) 100%
);
box-shadow:
inset 0 0 18px rgba(255,255,255,0.028),
inset 0 0 38px rgba(0,0,0,0.66);
}
.compact-crt-media::after {
content: "";
position: absolute;
inset: 6px;
z-index: 4;
border-radius: 7px;
pointer-events: none;
opacity: 0.34;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0px,
rgba(255,255,255,0.070) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}
.compact-crt-static {
position: absolute;
inset: 6px;
z-index: 5;
border-radius: 7px;
pointer-events: none;
opacity: 0.30;
background:
repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 4px,
rgba(255,255,255,0.10) 5px,
transparent 6px,
transparent 10px
),
linear-gradient(
to bottom,
transparent 0%,
transparent 43%,
rgba(255,255,255,0.11) 49%,
rgba(180,180,180,0.08) 50%,
rgba(90,90,90,0.08) 51%,
transparent 56%,
transparent 100%
);
mix-blend-mode: screen;
animation:
compact-crt-static-roll 3.8s linear infinite,
compact-crt-static-flicker 1.7s steps(1, end) infinite;
}
.compact-crt-media:hover::after {
opacity: 0.40;
}
.compact-crt-media:hover .compact-crt-static {
opacity: 0.36;
}
.compact-crt-media:hover img {
filter:
drop-shadow(0 1px 3px rgba(0,0,0,0.78))
drop-shadow(0 0 5px rgba(255,255,255,0.08));
}
@keyframes compact-crt-static-roll {
from {
background-position:
0 0,
0 110%;
}
to {
background-position:
0 -32px,
0 -30%;
}
}
@keyframes compact-crt-static-flicker {
0%, 100% {
transform: translateX(0);
opacity: 0.26;
}
11% {
transform: translateX(-1px);
opacity: 0.36;
}
12% {
transform: translateX(1px);
opacity: 0.22;
}
36% {
transform: translateX(0);
opacity: 0.30;
}
37% {
transform: translateX(1px);
opacity: 0.38;
}
38% {
transform: translateX(-1px);
opacity: 0.24;
}
64% {
transform: translateX(0);
opacity: 0.32;
}
65% {
transform: translateX(-1px);
opacity: 0.40;
}
66% {
transform: translateX(0);
opacity: 0.26;
}
}
@keyframes compact-crt-image-jitter {
0%, 82%, 100% {
transform: translateX(0);
}
83% {
transform: translateX(-1px);
}
84% {
transform: translateX(1px);
}
85% {
transform: translateX(0);
}
92% {
transform: translateX(1px);
}
93% {
transform: translateX(-1px);
}
94% {
transform: translateX(0);
}
}
.compact-crt-media.compact-crt-portrait {
padding: 4px 5px;
border-radius: 8px;
}
.compact-crt-media.compact-crt-portrait::before {
inset: 3px;
border-radius: 5px;
}
.compact-crt-media.compact-crt-portrait::after {
inset: 3px;
border-radius: 5px;
}
.compact-crt-media.compact-crt-portrait .compact-crt-static {
inset: 3px;
border-radius: 5px;
}
.compact-crt-media.compact-crt-portrait img,
.compact-crt-media.compact-crt-portrait .mw-file-element {
display: block;
}
/* =========================================
Related Template Title
========================================= */
.related-template-title {
position: relative;
overflow: hidden;
width: 100%;
border-radius: 5px;
background: #111111;
color: #fff;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555;
}
.related-template-title::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0%,
rgba(255,255,255,0.026) 18%,
transparent 45%,
rgba(0,0,0,0.18) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.045) 18%,
transparent 36%,
transparent 100%
);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
}
.related-template-title::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: inherit;
opacity: 0.20;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.055) 0px,
rgba(255,255,255,0.055) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}
.related-template-title > * {
position: relative;
z-index: 3;
}
/* =========================================
Page Top CRT Banner
Template use:
{{Banner|[[파일:example.png{{!}}1000px{{!}}link=]]|80px|20px}}
2번 인자: 양수면 좌측 이동
3번 인자: 양수면 아래 이동
========================================= */
.crt-page-monitor-frame {
position: relative;
box-sizing: border-box;
width: 100%;
aspect-ratio: 2560 / 580;
margin: 0 auto 16px auto;
padding: 14px 20px 16px 20px;
border-radius: 18px;
background:
linear-gradient(
145deg,
#151515 0%,
#0b0b0b 28%,
#050505 58%,
#181818 100%
);
border: 2px solid #242424;
box-shadow:
inset 0 3px 8px rgba(0,0,0,0.78),
inset 0 -2px 0 rgba(255,255,255,0.030),
inset 4px 0 10px rgba(0,0,0,0.72),
inset -3px 0 0 rgba(0,0,0,0.78),
0 0 0 3px #050505,
0 0 0 5px #242424;
overflow: hidden;
}
.crt-page-monitor-frame::before {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
pointer-events: none;
opacity: 0.08;
background:
linear-gradient(
to bottom,
rgba(0,0,0,0.38) 0%,
transparent 20%,
transparent 100%
),
linear-gradient(
to right,
rgba(0,0,0,0.34) 0%,
transparent 18%,
transparent 100%
);
mix-blend-mode: normal;
}
.crt-page-monitor-frame::after {
content: none;
}
.crt-page-monitor-inner {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 6px;
border-radius: 13px;
background:
linear-gradient(
145deg,
#020202 0%,
#080808 45%,
#030303 100%
);
border: 1px solid #020202;
box-shadow:
inset 0 11px 24px rgba(0,0,0,0.98),
inset 0 -2px 3px rgba(255,255,255,0.028),
inset 8px 0 20px rgba(0,0,0,0.94),
inset -8px 0 20px rgba(0,0,0,0.94),
0 0 0 1px rgba(255,255,255,0.030);
}
.crt-page-monitor-screen {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 8px / 15px;
background: #050505;
border: 1px solid #050505;
box-shadow:
inset 0 0 18px rgba(0,0,0,0.88),
inset 0 0 42px rgba(0,0,0,0.70),
0 0 0 1px rgba(255,255,255,0.026);
}
.crt-page-monitor-image,
.crt-page-monitor-image-base,
.crt-page-monitor-image-bloom,
.crt-page-monitor-slice {
position: absolute;
inset: 0;
line-height: 0;
overflow: hidden;
}
.crt-page-monitor-image {
z-index: 1;
}
.crt-page-monitor-image-base {
z-index: 3;
}
.crt-page-monitor-image-bloom {
z-index: 4;
pointer-events: none;
opacity: 0.38;
mix-blend-mode: normal;
filter:
blur(9px)
brightness(0.92)
contrast(1.02)
saturate(1.04);
}
.crt-page-monitor-image-base a,
.crt-page-monitor-image-base span,
.crt-page-monitor-image-base .mw-file-description,
.crt-page-monitor-image-base .mw-default-size,
.crt-page-monitor-image-base .mw-image-border,
.crt-page-monitor-image-bloom a,
.crt-page-monitor-image-bloom span,
.crt-page-monitor-image-bloom .mw-file-description,
.crt-page-monitor-image-bloom .mw-default-size,
.crt-page-monitor-image-bloom .mw-image-border,
.crt-page-monitor-slice a,
.crt-page-monitor-slice span,
.crt-page-monitor-slice .mw-file-description,
.crt-page-monitor-slice .mw-default-size,
.crt-page-monitor-slice .mw-image-border {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
}
.crt-page-monitor-image-base img,
.crt-page-monitor-image-base .mw-file-element,
.crt-page-monitor-image-bloom img,
.crt-page-monitor-image-bloom .mw-file-element,
.crt-page-monitor-slice img,
.crt-page-monitor-slice .mw-file-element,
.crt-page-monitor-slice-img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center;
border: 0 !important;
transform:
translate(
calc(0px - var(--crt-img-left, 0px)),
var(--crt-img-down, 0px)
)
scale(var(--crt-img-scale, 1.04));
transform-origin: center center;
}
.crt-page-monitor-image-base img,
.crt-page-monitor-image-base .mw-file-element {
filter:
brightness(0.84)
contrast(1.08)
saturate(0.90);
}
.crt-page-monitor-image-bloom img,
.crt-page-monitor-image-bloom .mw-file-element {
transform:
translate(
calc(0px - var(--crt-img-left, 0px)),
var(--crt-img-down, 0px)
)
scale(calc(var(--crt-img-scale, 1.04) + 0.02));
}
.crt-page-monitor-slice img,
.crt-page-monitor-slice .mw-file-element,
.crt-page-monitor-slice-img {
filter:
brightness(0.96)
contrast(1.18)
saturate(0.82);
}
.crt-page-monitor-image::after {
content: "";
position: absolute;
inset: -3%;
z-index: 6;
pointer-events: none;
opacity: 0.16;
background:
radial-gradient(
ellipse at 50% 45%,
rgba(220,235,230,0.12) 0%,
rgba(170,190,185,0.05) 34%,
rgba(70,85,82,0.03) 62%,
transparent 100%
),
linear-gradient(
to bottom,
rgba(255,255,255,0.04) 0%,
rgba(255,255,255,0.014) 28%,
transparent 70%,
rgba(0,0,0,0.08) 100%
);
mix-blend-mode: normal;
}
.crt-page-monitor-slice {
z-index: 5;
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
will-change: transform, opacity, clip-path, filter;
}
.crt-page-monitor-slice-a {
animation: crt-slice-tear-a 4.7s steps(1, end) infinite;
}
.crt-page-monitor-slice-b {
animation: crt-slice-tear-b 6.1s steps(1, end) infinite;
}
.crt-page-monitor-slice-c {
animation: crt-slice-tear-c 7.4s steps(1, end) infinite;
}
.crt-page-monitor-screen::before {
content: "";
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
border-radius: 8px / 15px;
background:
radial-gradient(
ellipse at 50% 50%,
transparent 0%,
transparent 62%,
rgba(0,0,0,0.16) 78%,
rgba(0,0,0,0.42) 100%
),
linear-gradient(
to bottom,
rgba(0,0,0,0.18) 0%,
transparent 14%,
transparent 82%,
rgba(0,0,0,0.24) 100%
),
linear-gradient(
to right,
rgba(0,0,0,0.18) 0%,
transparent 8%,
transparent 92%,
rgba(0,0,0,0.18) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.030) 18%,
transparent 38%,
transparent 100%
);
box-shadow:
inset 0 0 20px rgba(255,255,255,0.018),
inset 0 0 54px rgba(0,0,0,0.54);
}
.crt-page-monitor-screen::after {
content: "";
position: absolute;
inset: -80px 0;
z-index: 21;
pointer-events: none;
opacity: 0.20;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 1px,
transparent 2px,
transparent 5px
);
mix-blend-mode: screen;
animation: crt-scanlines-up 7s linear infinite;
}
.crt-page-monitor-glitch {
position: absolute;
inset: 0;
z-index: 22;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
to bottom,
transparent 0%,
rgba(255,255,255,0.12) 48%,
rgba(212,90,162,0.14) 50%,
rgba(90,120,255,0.08) 52%,
transparent 56%
);
mix-blend-mode: screen;
animation: crt-soft-glitch-band 8.2s steps(1, end) infinite;
}
.crt-page-monitor-tear {
position: absolute;
inset: 0;
z-index: 23;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
to right,
transparent 0%,
rgba(120,180,255,0.07) 10%,
rgba(255,255,255,0.11) 48%,
rgba(212,90,162,0.08) 78%,
transparent 100%
);
mix-blend-mode: screen;
animation: crt-soft-horizontal-tear 5.6s steps(1, end) infinite;
}
@keyframes crt-slice-tear-a {
0%, 11%, 100% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
12% {
opacity: 0.38;
transform: translateX(-18px);
clip-path: inset(17% 0 78% 0);
}
13% {
opacity: 0.22;
transform: translateX(11px);
clip-path: inset(18% 0 77% 0);
filter: hue-rotate(-8deg);
}
14% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
63% {
opacity: 0.30;
transform: translateX(9px);
clip-path: inset(24% 0 70% 0);
}
64% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
}
@keyframes crt-slice-tear-b {
0%, 37%, 100% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
38% {
opacity: 0.42;
transform: translateX(24px);
clip-path: inset(43% 0 50% 0);
}
39% {
opacity: 0.26;
transform: translateX(-14px);
clip-path: inset(45% 0 48% 0);
filter: hue-rotate(10deg) brightness(1.08);
}
40% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
78% {
opacity: 0.34;
transform: translateX(-20px);
clip-path: inset(51% 0 43% 0);
}
79% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
}
@keyframes crt-slice-tear-c {
0%, 21%, 100% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
22% {
opacity: 0.28;
transform: translateX(-30px);
clip-path: inset(67% 0 25% 0);
}
23% {
opacity: 0.18;
transform: translateX(16px);
clip-path: inset(68% 0 23% 0);
filter: contrast(1.25) brightness(1.06);
}
24% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
91% {
opacity: 0.36;
transform: translateX(18px);
clip-path: inset(73% 0 18% 0);
}
92% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
}
@keyframes crt-soft-glitch-band {
0%, 52%, 100% {
opacity: 0;
transform: translateY(80%);
}
53% {
opacity: 0.42;
transform: translateY(36%);
}
54% {
opacity: 0.16;
transform: translateY(20%) skewX(-1deg);
}
55% {
opacity: 0;
transform: translateY(-20%);
}
}
@keyframes crt-soft-horizontal-tear {
0%, 68%, 100% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 0 0);
}
69% {
opacity: 0.32;
transform: translateX(-16px);
clip-path: inset(34% 0 58% 0);
}
70% {
opacity: 0.18;
transform: translateX(12px);
clip-path: inset(37% 0 55% 0);
}
71% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 0 0);
}
}
@media (prefers-reduced-motion: reduce) {
.crt-page-monitor-slice-a,
.crt-page-monitor-slice-b,
.crt-page-monitor-slice-c,
.crt-page-monitor-screen::after,
.crt-page-monitor-glitch,
.crt-page-monitor-tear {
animation: none !important;
}
.crt-page-monitor-slice,
.crt-page-monitor-glitch,
.crt-page-monitor-tear {
opacity: 0 !important;
}
}
/* =========================================
Historical Events Timeline
========================================= */
.timeline-event {
position: relative;
display: block;
width: 100%;
box-sizing: border-box;
line-height: inherit;
text-align: center;
}
.timeline-title {
position: relative;
z-index: 2;
display: inline-block;
text-align: center;
}
.timeline-event.he-linked::before {
content: "";
position: absolute;
top: -2px;
left: 2px;
right: 2px;
height: 3px;
border-radius: 999px;
pointer-events: none;
background:
linear-gradient(
to right,
transparent 0%,
color-mix(in srgb, var(--he-color) 18%, transparent) 8%,
color-mix(in srgb, var(--he-color) 92%, transparent) 14%,
color-mix(in srgb, var(--he-color) 92%, transparent) 86%,
color-mix(in srgb, var(--he-color) 18%, transparent) 92%,
transparent 100%
);
box-shadow:
0 0 7px color-mix(in srgb, var(--he-color) 28%, transparent);
}
.timeline-event.he-root {
overflow: visible;
}
.timeline-event.he-root::before {
content: "";
position: absolute;
left: 6%;
right: 6%;
top: 50%;
height: 16px;
transform: translateY(-50%);
border-radius: 999px;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.05) 0%,
rgba(0,0,0,0.24) 100%
),
linear-gradient(
to right,
transparent 0%,
color-mix(in srgb, var(--he-color) 10%, transparent) 8%,
color-mix(in srgb, var(--he-color) 24%, transparent) 18%,
color-mix(in srgb, var(--he-color) 36%, transparent) 50%,
color-mix(in srgb, var(--he-color) 24%, transparent) 82%,
color-mix(in srgb, var(--he-color) 10%, transparent) 92%,
transparent 100%
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
inset 0 -1px 0 rgba(0,0,0,0.42),
0 0 8px color-mix(in srgb, var(--he-color) 16%, transparent);
-webkit-mask-image:
linear-gradient(
to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
mask-image:
linear-gradient(
to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
}
.timeline-event.he-root::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
top: 50%;
height: 22px;
transform: translateY(-50%);
pointer-events: none;
background:
linear-gradient(
to right,
transparent 0%,
color-mix(in srgb, var(--he-color) 48%, transparent) 16%,
color-mix(in srgb, var(--he-color) 48%, transparent) 84%,
transparent 100%
) top center / 100% 1px no-repeat,
linear-gradient(
to right,
transparent 0%,
color-mix(in srgb, var(--he-color) 24%, transparent) 16%,
color-mix(in srgb, var(--he-color) 24%, transparent) 84%,
transparent 100%
) bottom center / 100% 1px no-repeat;
}
.timeline-event.he-root .timeline-title {
text-shadow:
0 0 4px color-mix(in srgb, var(--he-color) 34%, transparent),
0 0 9px color-mix(in srgb, var(--he-color) 16%, transparent);
}
/* =========================================
Tree List
========================================= */
.tree-container {
margin: 0;
padding: 0;
}
.tree-node {
position: relative;
padding-left: 20px;
margin: 0;
text-indent: 0;
line-height: 1.55;
}
.tree-node::before {
content: "";
position: absolute;
top: 0;
left: 7px;
width: 1.2px;
height: 100%;
background: #7F7F7F;
}
.tree-node::after {
content: "";
position: absolute;
top: 12px;
left: 7px;
width: 8px;
height: 0;
border-top: 1.2px solid #7F7F7F;
}
.tree-node:last-of-type::before {
height: 12px;
}
/* =========================================
Meeting Composition Panel
========================================= */
.meeting-panel {
position: relative;
isolation: isolate;
z-index: 0;
width: calc(100% + 4px);
left: -2px;
margin: 0 auto 15px auto;
border: 2px solid #1a1a1a;
border-radius: 5px;
background:
radial-gradient(
ellipse at 50% 35%,
rgba(255,255,255,0.025) 0%,
transparent 46%
),
linear-gradient(
to bottom,
#1A1A1A 0%,
#181818 52%,
#151515 100%
);
color: #FFF;
box-shadow:
0 4px 12px #000;
text-align: center;
font-size: 11px;
box-sizing: border-box;
overflow: visible;
}
.meeting-panel::before {
content: "";
position: absolute;
inset: -5px;
z-index: -2;
border-radius: 8px;
background: #854369;
pointer-events: none;
}
.meeting-panel::after {
content: "";
position: absolute;
inset: -3px;
z-index: -1;
border-radius: 7px;
background: #1A1A1A;
pointer-events: none;
}
.meeting-panel-body {
width: 100%;
color: #E4E4E4;
padding: 4.5px 9px 9px 9px;
box-sizing: border-box;
border-radius: 3px;
background: transparent;
overflow: hidden;
}
.meeting-title-wrap {
width: 100%;
max-width: 760px;
margin: 5px auto 8px auto;
}
.meeting-title-wrap .infobox-glass-title {
top: 0;
margin-top: 0;
padding: 5px;
line-height: 1.2;
}
.meeting-title-table {
width: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
border: 2px solid transparent;
border-collapse: collapse;
table-layout: auto;
}
.meeting-title-table td,
.meeting-title-table th {
background: none !important;
border: none !important;
vertical-align: middle !important;
}
.meeting-title-table .meeting-title-image-left {
width: auto;
text-align: right !important;
padding: 0 6px 0 0 !important;
line-height: 0;
white-space: nowrap;
}
.meeting-title-table .meeting-title-image-right {
width: auto;
text-align: left !important;
padding: 0 0 0 6px !important;
line-height: 0;
white-space: nowrap;
}
.meeting-title-table .meeting-title-cell {
width: auto;
line-height: 1.15 !important;
background: none !important;
text-align: center !important;
white-space: nowrap;
padding: 0 !important;
}
.meeting-title-image-left img,
.meeting-title-image-right img,
.meeting-title-image-left .mw-file-element,
.meeting-title-image-right .mw-file-element {
display: block;
border: 0 !important;
vertical-align: middle;
filter:
drop-shadow(0 1px 2px rgba(0,0,0,0.75))
drop-shadow(0 0 3px rgba(255,255,255,0.08));
}
.meeting-title-name {
display: block;
line-height: 1.15;
text-align: center;
}
.meeting-title-meta {
display: block;
margin-top: 1px;
color: #7F7F7F;
font-size: 10px;
font-weight: normal;
line-height: 1.15;
text-align: center;
}
.meeting-seatmap {
position: relative;
margin: 0 auto;
padding: 5px 0 4px 0;
background: transparent;
border-radius: 0;
overflow: visible;
}
.meeting-seatmap::before {
content: "";
position: absolute;
left: 50%;
top: 84px;
bottom: 145px;
width: 2px;
transform: translateX(-50%);
background:
linear-gradient(
to bottom,
transparent 0%,
rgba(65,65,65,0.72) 18%,
#414141 50%,
rgba(65,65,65,0.72) 82%,
transparent 100%
);
box-shadow: 0 0 6px rgba(65,65,65,0.16);
pointer-events: none;
}
.meeting-table-zone::before {
content: "";
position: absolute;
left: 7%;
right: 7%;
top: 50%;
height: 2px;
transform: translateY(-50%);
background:
linear-gradient(
to right,
transparent 0%,
rgba(65,65,65,0.72) 14%,
#414141 50%,
rgba(65,65,65,0.72) 86%,
transparent 100%
);
box-shadow: 0 0 6px rgba(65,65,65,0.14);
pointer-events: none;
}
.meeting-axis-label {
position: relative;
z-index: 4;
display: inline-block;
min-width: 42px;
margin: 2px auto 4px auto;
padding: 2px 9px;
border-radius: 5px;
background: #0c0c0c;
color: #E4E4E4;
font-weight: bold;
line-height: 1.35;
box-shadow:
inset 0 -1px 0 #525252,
0 0 0 3px #1A1A1A;
}
.meeting-chair-line {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
margin: 0 0 6px 0;
background: transparent;
}
.meeting-table-zone {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
align-items: center;
width: 100%;
max-width: 980px;
min-height: 210px;
margin: 0 auto;
background: transparent;
}
.meeting-side {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 0;
min-width: 0;
background: transparent;
}
.meeting-side-left {
padding-right: 4px;
}
.meeting-side-right {
padding-left: 4px;
}
.meeting-center-spine {
position: relative;
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
min-height: 210px;
z-index: 4;
background: transparent;
}
.meeting-center-spine .meeting-axis-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
writing-mode: vertical-rl;
text-orientation: mixed;
min-width: 0;
min-height: 42px;
margin: 0;
padding: 8px 3px;
}
.meeting-advisory-zone {
position: relative;
z-index: 3;
margin-top: 6px;
background: transparent;
}
.meeting-advisory-zone > .meeting-axis-label {
margin-bottom: 6px;
}
.meeting-advisory-grid {
position: relative;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 0;
width: 100%;
max-width: 760px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
background: transparent;
}
.meeting-advisory-grid::before {
content: "";
position: absolute;
left: 7%;
right: 7%;
top: 94px;
height: 2px;
background:
linear-gradient(
to right,
transparent 0%,
rgba(65,65,65,0.72) 14%,
#414141 50%,
rgba(65,65,65,0.72) 86%,
transparent 100%
);
box-shadow: 0 0 6px rgba(65,65,65,0.14);
pointer-events: none;
}
.meeting-person-card {
position: relative;
z-index: 3;
background: transparent;
color: #fff;
text-align: center;
vertical-align: top;
padding: 0;
box-sizing: border-box;
}
.meeting-chair-card {
width: 180px;
}
.meeting-side .meeting-person-card {
width: 50%;
min-width: 0;
}
.meeting-advisory-card {
width: 33.333%;
min-width: 0;
}
.meeting-person-inner {
display: flex;
justify-content: center;
padding: 0;
background: transparent;
}
.meeting-person-stack {
width: 90%;
margin-top: 3px;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
}
.meeting-side .meeting-person-stack {
width: 94%;
}
.meeting-advisory-card .meeting-person-stack {
width: 92%;
}
.meeting-person-stack .compact-crt-media {
margin-left: auto;
margin-right: auto;
flex: 0 0 auto;
}
.meeting-person-stack .office-card-name-cell {
width: 170px;
max-width: 100%;
margin-top: 6px;
margin-left: auto;
margin-right: auto;
flex: 0 0 auto;
}
.meeting-chair-card .office-card-name-cell {
width: 170px;
}
.meeting-advisory-card .office-card-name-cell {
width: 170px;
}
.meeting-office {
display: block;
margin-top: 2px;
color: #7F7F7F;
font-size: 10px;
line-height: 1.3;
font-weight: normal;
}
/* =====================================================================
ScreenHeader + Screen Bezel Module
Template.css에서 교체할 범위:
[/* ScreenHeader */] 주석부터
[/* Document View System — doc-* */] 주석 바로 위까지
전체를 지우고 이 파일 내용으로 교체하세요.
===================================================================== */
/* =========================================
ScreenHeader — 컨테이너 & 레이아웃 제어
========================================= */
.liberty-content:has(.screen-header) .liberty-content-header .title {
display: none !important;
}
/* screen-header 문서 — 컨테이너를 베젤로 */
.Liberty .content-wrapper .liberty-content:has(.screen-header) .liberty-content-main {
position: relative !important;
box-sizing: border-box !important;
border: 2px solid #854369 !important;
border-radius: 5px !important;
background: linear-gradient(
160deg,
#2e2e2e 0%,
#1e1e1e 30%,
#121212 65%,
#1a1a1a 100%
) !important;
box-shadow:
inset 0 3px 0 rgba(255,255,255,0.10),
inset 0 -4px 0 rgba(0,0,0,0.85),
inset 4px 0 0 rgba(255,255,255,0.04),
inset -4px 0 0 rgba(0,0,0,0.70) !important;
overflow: hidden !important;
}
/* 상단 빛반사 */
.Liberty .content-wrapper .liberty-content:has(.screen-header) .liberty-content-main::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40%;
border-radius: 5px 5px 0 0;
background: linear-gradient(to bottom, rgba(255,255,255,0.06) 0%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.liberty-content:has(.screen-header) .screen-title-plate,
.liberty-content:has(.screen-header) .screen-header-frame,
.liberty-content:has(.screen-header) .screen-header-inner,
.liberty-content:has(.screen-header) .screen-header-media,
.liberty-content:has(.screen-header) .screen-header-vignette,
.liberty-content:has(.screen-header) .screen-header-scanline,
.liberty-content:has(.screen-header) .screen-header-mask,
.liberty-content:has(.screen-header) .screen-header-glass,
.liberty-content:has(.screen-header) .screen-header-subtitle {
display: none !important;
}
/* =========================================
screen-header
베젤 좌우 padding(24px)을 정확히 상쇄
width: calc(100% + 48px), margin: 0 -24px
========================================= */
.screen-header {
position: relative !important;
width: 100% !important;
height: var(--screen-header-height, 360px) !important;
margin: 0 !important;
padding: 8px 8px 4px 8px !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: #050505 !important;
border: 0 !important;
border-bottom: 0 !important;
isolation: isolate !important;
}
.screen-header-recess {
position: relative !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 4px !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: #050505 !important;
border: 1px solid rgba(255,255,255,0.035) !important;
border-radius: 6px !important;
box-shadow:
inset 0 18px 30px rgba(0,0,0,0.82),
inset 0 -9px 16px rgba(255,255,255,0.026),
inset 18px 0 30px rgba(0,0,0,0.66),
inset -18px 0 30px rgba(0,0,0,0.66),
0 1px 0 rgba(255,255,255,0.030),
0 -1px 0 rgba(0,0,0,0.70) !important;
}
.screen-header-recess::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.10;
background: repeating-linear-gradient(
135deg,
rgba(255,255,255,0.030) 0px,
rgba(255,255,255,0.030) 1px,
transparent 1px,
transparent 5px
);
mix-blend-mode: screen;
}
.screen-header-recess::after {
content: "";
position: absolute;
inset: 14px;
z-index: 12;
pointer-events: none;
border-radius: 0;
box-shadow:
0 -20px 32px rgba(0,0,0,0.86),
0 12px 18px rgba(255,255,255,0.024),
-20px 0 32px rgba(0,0,0,0.78),
20px 0 32px rgba(0,0,0,0.78),
inset 0 0 0 1px rgba(255,255,255,0.018) !important;
}
.screen-header .screen-header-crt {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.screen-header .screen-header-crt::before,
.screen-header .screen-header-crt::after {
content: none !important;
}
.screen-header .crt-page-monitor-inner {
position: relative !important;
width: 100% !important;
height: 100% !important;
padding: 5px !important;
margin: 0 !important;
box-sizing: border-box !important;
border-radius: 0 !important;
background: linear-gradient(
145deg,
#050505 0%,
#0d0d0d 46%,
#050505 100%
) !important;
border: 1px solid #050505 !important;
box-shadow:
inset 0 10px 20px rgba(0,0,0,0.97),
inset 0 -2px 3px rgba(255,255,255,0.030),
inset 8px 0 18px rgba(0,0,0,0.90),
inset -8px 0 18px rgba(0,0,0,0.90) !important;
}
.screen-header .crt-page-monitor-screen {
position: relative !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
border-radius: 0 !important;
background: #050505 !important;
border: 1px solid #050505 !important;
box-shadow:
inset 0 0 0 1px #111,
inset 0 0 24px rgba(0,0,0,0.94),
inset 0 0 64px rgba(0,0,0,0.80),
inset 0 0 118px rgba(0,0,0,0.50),
0 0 0 1px rgba(255,255,255,0.030) !important;
}
.screen-header .crt-page-monitor-image,
.screen-header .crt-page-monitor-image-base,
.screen-header .crt-page-monitor-image-bloom,
.screen-header .crt-page-monitor-slice {
position: absolute !important;
inset: 0 !important;
border-radius: 0 !important;
}
.screen-header .crt-page-monitor-image-base a,
.screen-header .crt-page-monitor-image-base span,
.screen-header .crt-page-monitor-image-base .mw-file-description,
.screen-header .crt-page-monitor-image-base .mw-default-size,
.screen-header .crt-page-monitor-image-base .mw-image-border,
.screen-header .crt-page-monitor-image-bloom a,
.screen-header .crt-page-monitor-image-bloom span,
.screen-header .crt-page-monitor-image-bloom .mw-file-description,
.screen-header .crt-page-monitor-image-bloom .mw-default-size,
.screen-header .crt-page-monitor-image-bloom .mw-image-border,
.screen-header .crt-page-monitor-slice a,
.screen-header .crt-page-monitor-slice span,
.screen-header .crt-page-monitor-slice .mw-file-description,
.screen-header .crt-page-monitor-slice .mw-default-size,
.screen-header .crt-page-monitor-slice .mw-image-border {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
}
.screen-header .crt-page-monitor-image-base img,
.screen-header .crt-page-monitor-image-base .mw-file-element,
.screen-header .crt-page-monitor-image-bloom img,
.screen-header .crt-page-monitor-image-bloom .mw-file-element,
.screen-header .crt-page-monitor-slice img,
.screen-header .crt-page-monitor-slice .mw-file-element,
.screen-header .crt-page-monitor-slice-img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: var(--screen-image-position, center center) !important;
border: 0 !important;
border-radius: 0 !important;
}
.screen-header .crt-page-monitor-screen::before {
content: "" !important;
position: absolute !important;
inset: -4px !important;
z-index: 20 !important;
pointer-events: none !important;
border-radius: 0 !important;
background:
radial-gradient(
ellipse at 50% 50%,
transparent 0%,
transparent 62%,
rgba(0,0,0,0.18) 78%,
rgba(0,0,0,0.48) 100%
),
linear-gradient(
to bottom,
rgba(0,0,0,0.20) 0%,
transparent 14%,
transparent 82%,
rgba(0,0,0,0.28) 100%
),
linear-gradient(
to right,
rgba(0,0,0,0.20) 0%,
transparent 8%,
transparent 92%,
rgba(0,0,0,0.20) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.030) 18%,
transparent 38%,
transparent 100%
) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.018),
inset 0 0 24px rgba(255,255,255,0.015),
inset 0 0 74px rgba(0,0,0,0.64),
inset 0 22px 38px rgba(0,0,0,0.60),
inset 0 -20px 36px rgba(0,0,0,0.44),
inset 18px 0 36px rgba(0,0,0,0.56),
inset -18px 0 36px rgba(0,0,0,0.56) !important;
}
.screen-header .crt-page-monitor-screen::after {
content: "" !important;
position: absolute !important;
inset: -80px -4px !important;
z-index: 21 !important;
pointer-events: none !important;
opacity: 0.22 !important;
border-radius: 0 !important;
background: repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 1px,
transparent 2px,
transparent 5px
) !important;
mix-blend-mode: screen !important;
animation: crt-scanlines-up 7s linear infinite !important;
}
.screen-header .crt-page-monitor-glitch,
.screen-header .crt-page-monitor-tear {
inset: -4px !important;
border-radius: 0 !important;
}
.screen-header .crt-page-monitor-glitch { z-index: 22 !important; }
.screen-header .crt-page-monitor-tear { z-index: 23 !important; }
.screen-header-title {
position: absolute !important;
left: 5px !important;
bottom: 5px !important;
z-index: 40 !important;
margin: 0 !important;
padding: 0 !important;
max-width: calc(100% - 10px) !important;
box-sizing: border-box !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.screen-header-title-main {
margin: 0 !important;
padding: 0 0 8px 10px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #ffffff !important;
font-family: 'BoldRound', sans-serif !important;
font-size: 40px !important;
font-weight: 700 !important;
line-height: 0.95 !important;
letter-spacing: 0.06em !important;
text-shadow:
3px 3px 0 rgba(0,0,0,0.98),
0 0 6px rgba(0,0,0,0.98),
0 0 14px rgba(0,0,0,0.95),
0 0 26px rgba(0,0,0,0.92),
-1px 0 0 rgba(80,160,255,0.24),
1px 0 0 rgba(255,55,90,0.22) !important;
white-space: nowrap !important;
}
.screen-header-subtitle {
display: none !important;
}
/* =========================================
screen-body
베젤 좌우 padding(24px)을 정확히 상쇄
하단 -28px은 베젤 하단 padding을 상쇄해서 베젤 닫음
========================================= */
.screen-header + .screen-body {
margin-top: 0 !important;
border-top: 0 !important;
}
.screen-body {
position: relative;
width: 100%;
margin: 0;
padding: 4px 8px 4px 8px;
box-sizing: border-box;
background: #171717;
overflow: hidden;
}
/* =========================================
Document View System — doc-*
========================================= */
.doc-body {
position: relative;
z-index: 3;
box-sizing: border-box;
width: 100%;
padding: 0;
background: transparent;
}
/* =========================================
doc-header
========================================= */
.doc-header {
position: relative;
display: grid;
grid-template-columns: 24px 1fr auto 24px;
align-items: center;
height: 28px;
margin-bottom: 7px;
padding: 0 8px;
box-sizing: border-box;
background:
linear-gradient(
to bottom,
#282828 0%,
#1a1a1a 40%,
#161616 100%
);
border-top: 1px solid #3a3a3a;
border-bottom: 1px solid #0a0a0a;
border-left: 1px solid #222;
border-right: 1px solid #222;
border-radius: 2px;
}
.doc-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.06;
background: repeating-linear-gradient(
135deg,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 1px,
transparent 1px,
transparent 4px
);
border-radius: inherit;
}
.doc-header-id {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: #c0c0c0;
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
position: relative;
z-index: 1;
}
.doc-screw {
position: relative;
z-index: 1;
width: 10px;
height: 10px;
border-radius: 50%;
background:
radial-gradient(circle at 36% 32%, rgba(255,255,255,0.35) 0%, transparent 28%),
linear-gradient(145deg, #505050 0%, #282828 55%, #0e0e0e 100%);
border: 1px solid #090909;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.15),
inset 0 -1px 0 rgba(0,0,0,0.60),
0 0 0 1px #333;
justify-self: center;
}
.doc-screw::after {
content: "";
position: absolute;
top: 50%;
left: 15%;
right: 15%;
height: 1px;
transform: translateY(-50%);
background: rgba(0,0,0,0.55);
border-radius: 1px;
}
.doc-status {
display: flex;
align-items: center;
gap: 5px;
position: relative;
z-index: 1;
}
.doc-status-lamp {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #111;
border: 1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 0 0 1px #252525;
}
.doc-status-lamp.on {
background: radial-gradient(circle at 38% 32%, #d9ff9d 0%, #7ec43e 45%, #253d18 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.28),
0 0 0 1px #1a3010,
0 0 5px rgba(100,200,50,0.45);
}
.doc-status-lamp.warn {
background: radial-gradient(circle at 38% 32%, #ffe8b0 0%, #d89a42 45%, #4d2a0d 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.28),
0 0 0 1px #3a1f06,
0 0 5px rgba(220,140,40,0.45);
}
/* =========================================
doc-layout
========================================= */
.doc-layout {
display: grid;
grid-template-columns: 200px minmax(0, 1fr) 320px;
gap: 7px;
align-items: stretch;
min-height: 620px;
}
.doc-layout-left,
.doc-layout-center,
.doc-layout-right {
min-width: 0;
}
.doc-layout-center,
.doc-layout-right {
display: flex;
flex-direction: column;
gap: 7px;
}
.doc-layout-lower {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 7px;
flex: 1;
}
/* =========================================
doc-panel
========================================= */
.doc-panel {
position: relative;
box-sizing: border-box;
width: 100%;
min-width: 0;
background: #1a1a1a;
border-top: 1px solid #303030;
border-bottom: 1px solid #080808;
border-left: 1px solid #222;
border-right: 1px solid #111;
border-radius: 2px;
overflow: hidden;
}
.doc-panel::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 5px;
height: 5px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25) 0%, transparent 40%),
linear-gradient(145deg, #444 0%, #1e1e1e 100%);
border: 1px solid #080808;
box-shadow: 0 0 0 1px #2a2a2a;
pointer-events: none;
z-index: 10;
}
.doc-panel::after {
content: "";
position: absolute;
top: 4px;
right: 4px;
width: 5px;
height: 5px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25) 0%, transparent 40%),
linear-gradient(145deg, #444 0%, #1e1e1e 100%);
border: 1px solid #080808;
box-shadow: 0 0 0 1px #2a2a2a;
pointer-events: none;
z-index: 10;
}
.doc-panel-title {
position: relative;
z-index: 3;
box-sizing: border-box;
padding: 6px 10px 5px 10px;
font-family: 'Galmuri11', sans-serif !important;
font-size: 10px;
font-weight: 700;
text-align: center;
line-height: 1.2;
letter-spacing: 0.10em;
color: #888;
background: linear-gradient(to bottom, #161616 0%, #121212 100%);
border-bottom: 1px solid #0d0d0d;
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
text-transform: uppercase;
}
.doc-panel-heading {
padding: 10px 18px;
font-size: 11px;
font-weight: 700;
color: #7a7a7a;
letter-spacing: 0.06em;
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
position: relative;
z-index: 3;
}
.doc-panel table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.doc-panel table th,
.doc-panel table td {
background: transparent !important;
border: none !important;
padding: 0 !important;
vertical-align: middle !important;
}
.doc-panel table th[style],
.doc-panel table td[style] {
background: revert !important;
border: revert !important;
padding: revert !important;
}
/* =========================================
doc-display
========================================= */
.doc-display {
position: relative;
z-index: 3;
box-sizing: border-box;
padding: 4px 14px;
margin-bottom: 0;
min-height: 90px;
line-height: 1.8;
color: #d8d8d8;
background: #111111;
border-top: 1px solid #0a0a0a;
box-shadow:
inset 0 2px 6px rgba(0,0,0,0.55),
inset 0 0 1px rgba(0,0,0,0.80);
}
/* =========================================
doc-info
========================================= */
.doc-info-row {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 68px minmax(0, 1fr);
gap: 8px;
align-items: center;
margin: 7px 10px 0 10px;
}
.doc-info-key {
font-size: 10px;
font-weight: 700;
color: #7a7a7a;
letter-spacing: 0.06em;
text-shadow: 0 1px 0 rgba(0,0,0,0.70);
}
.doc-info-value {
position: relative;
overflow: hidden;
text-align: right;
border-radius: 2px;
background: #0e0e0e;
color: #d8d8d8;
padding: 4px 9px;
font-size: 11px;
font-weight: 700;
box-sizing: border-box;
border-top: 1px solid #0a0a0a;
border-bottom: 1px solid #252525;
border-left: 1px solid #111;
border-right: 1px solid #111;
box-shadow:
inset 0 2px 4px rgba(0,0,0,0.60),
inset 1px 0 0 rgba(255,255,255,0.015);
}
.doc-info-value::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.15;
background: repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.055) 0px,
rgba(255,255,255,0.055) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}
.doc-info-block {
padding: 0 8px 6px 8px;
background: #1a1a1a;
}
.doc-info-block-label {
display: block;
padding: 6px 2px 4px 2px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #9a9a9a;
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
}
/* =========================================
doc-nav
========================================= */
.doc-nav {
height: 100%;
display: flex;
flex-direction: column;
}
.doc-nav-item {
position: relative;
z-index: 3;
box-sizing: border-box;
width: calc(100% - 16px);
margin: 5px 8px 0 8px;
padding: 7px 24px 7px 10px;
font-size: 11px;
font-weight: 700;
line-height: 1.35;
color: #666;
background: linear-gradient(to bottom, #232323 0%, #1a1a1a 50%, #161616 100%);
border-top: 1px solid #2e2e2e;
border-bottom: 1px solid #0a0a0a;
border-left: 1px solid #222;
border-right: 1px solid #111;
border-radius: 2px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
0 1px 0 rgba(255,255,255,0.012);
cursor: pointer;
display: block;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.70);
}
.doc-nav-item::after {
content: "›";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #333;
font-size: 13px;
}
.doc-nav-item.active {
color: #e8e8e8;
background: linear-gradient(to bottom, #5a2040 0%, #3d1a2f 52%, #2e1222 100%);
border-top-color: #7a3055;
border-bottom-color: #1a0810;
border-left-color: #6a2848;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 0 6px rgba(212,90,162,0.10);
}
.doc-nav-item.active::after {
color: #d45aa2;
}
/* =========================================
doc-status-row
========================================= */
.doc-status-row {
position: relative;
z-index: 3;
display: flex;
align-items: center;
gap: 7px;
margin: 5px 8px 0 8px;
padding: 5px 9px;
box-sizing: border-box;
font-size: 10px;
font-weight: 700;
color: #555;
background: #111;
border-top: 1px solid #0a0a0a;
border-bottom: 1px solid #222;
border-left: 1px solid #111;
border-right: 1px solid #111;
border-radius: 2px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.50);
letter-spacing: 0.06em;
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
}
/* =========================================
doc-link
========================================= */
.doc-link {
position: relative;
z-index: 3;
box-sizing: border-box;
margin: 5px 10px 0 10px;
padding: 6px 10px 6px 14px;
font-size: 11px;
font-weight: 700;
color: #888;
background: linear-gradient(to bottom, #1a1a1a 0%, #151515 100%);
border-top: 1px solid #242424;
border-bottom: 1px solid #080808;
border-left: 1px solid #1e1e1e;
border-right: 1px solid #111;
border-radius: 2px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.018);
display: block;
text-decoration: none;
cursor: pointer;
text-shadow: 0 1px 0 rgba(0,0,0,0.70);
}
.doc-link::before {
content: "";
position: absolute;
left: 5px;
top: 20%;
bottom: 20%;
width: 2px;
background: #2e2e2e;
border-radius: 1px;
}
.doc-link:hover {
color: #c0c0c0;
background: linear-gradient(to bottom, #222 0%, #1a1a1a 100%);
border-top-color: #333;
}
.doc-link:hover::before {
background: #854369;
}
/* =========================================
doc-tab-bar
========================================= */
.doc-tab-bar {
position: relative;
z-index: 3;
display: flex;
align-items: center;
gap: 4px;
padding: 5px 6px;
background: linear-gradient(to bottom, #141414 0%, #111 100%);
border-top: 1px solid #0a0a0a;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.60);
}
.doc-tab-key {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
gap: 3px;
padding: 0 4px;
user-select: none;
white-space: nowrap;
}
.doc-tab-key kbd {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
font-size: 10px;
font-weight: 700;
font-family: inherit;
color: #e2e2e2;
background: linear-gradient(to bottom, #2a2a2a 0%, #1e1e1e 100%);
border-top: 1px solid #3a3a3a;
border-bottom: 1px solid #080808;
border-left: 1px solid #2e2e2e;
border-right: 1px solid #111;
border-radius: 2px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 1px 0 rgba(255,255,255,0.02);
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
}
.doc-tab-key .doc-tab-arrow {
font-size: 10px;
color: #333;
line-height: 1;
}
.doc-tab {
flex: 1;
box-sizing: border-box;
padding: 6px 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
color: #e2e2e2;
background: linear-gradient(to bottom, #1e1e1e 0%, #181818 100%);
border-top: 1px solid #2a2a2a;
border-bottom: 1px solid #080808;
border-left: 1px solid #222;
border-right: 1px solid #111;
border-radius: 2px;
cursor: pointer;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
text-transform: uppercase;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.doc-tab:hover {
color: #ffffff;
background: linear-gradient(to bottom, #242424 0%, #1a1a1a 100%);
border-top-color: #333;
}
.doc-tab.active {
color: #ffffff;
background: linear-gradient(to bottom, #2e1222 0%, #3d1a2f 52%, #5a2040 100%);
border-top-color: #7a3055;
border-bottom-color: #1a0810;
border-left-color: #6a2848;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
/* =========================================
doc-footer
========================================= */
.doc-footer {
position: relative;
display: grid;
grid-template-columns: 1fr 110px 44px 110px 200px;
gap: 12px;
align-items: center;
height: 44px;
margin-top: 7px;
padding: 0 10px;
box-sizing: border-box;
background: linear-gradient(to bottom, #282828 0%, #1a1a1a 40%, #161616 100%);
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555,
inset 0 2px 6px rgba(0,0,0,0.55);
border-top: 1px solid #3a3a3a;
border-bottom: 1px solid #0a0a0a;
border-left: 1px solid #222;
border-right: 1px solid #222;
border-radius: 2px;
}
.doc-footer::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.05;
background: repeating-linear-gradient(
135deg,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 1px,
transparent 1px,
transparent 4px
);
}
.doc-footer-sliders {
display: flex;
align-items: center;
gap: 10px;
}
.doc-slider {
position: relative;
width: 80px;
height: 6px;
background: #0a0a0a;
border-top: 1px solid #080808;
border-bottom: 1px solid #222;
border-radius: 99px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.70);
}
.doc-slider.short {
width: 54px;
}
.doc-slider::after {
content: "";
position: absolute;
top: -6px;
left: 48%;
width: 10px;
height: 18px;
border-radius: 2px;
background: linear-gradient(to bottom, #c8c0b2 0%, #8a8278 100%);
border-top: 1px solid #d8d0c2;
border-bottom: 1px solid #2a2622;
border-left: 1px solid #aaa49c;
border-right: 1px solid #5a544e;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.30),
0 1px 3px rgba(0,0,0,0.40);
}
.doc-date {
box-sizing: border-box;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: #d45aa2;
background: #0a0a0a;
border-top: 1px solid #080808;
border-bottom: 1px solid #2a1a22;
border-left: 1px solid #0e0e0e;
border-right: 1px solid #0e0e0e;
border-radius: 2px;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.70);
text-shadow: 0 0 8px rgba(212,90,162,0.40);
}
.doc-knob {
justify-self: center;
width: 32px;
height: 32px;
border-radius: 50%;
background:
radial-gradient(circle at 36% 28%, rgba(255,255,255,0.30) 0%, transparent 24%),
linear-gradient(145deg, #c8bfb0 0%, #8a8278 48%, #464039 100%);
border: 1px solid #2a2520;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.30),
inset 0 -2px 0 rgba(0,0,0,0.22),
0 2px 5px rgba(0,0,0,0.50);
}
.doc-keys {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
}
.doc-keys span {
height: 22px;
border-radius: 2px;
background: linear-gradient(to bottom, #d8d4ca 0%, #a09890 55%, #6e6660 100%);
border-top: 1px solid #e0dcd2;
border-bottom: 1px solid #1e1c18;
border-left: 1px solid #b8b0a8;
border-right: 1px solid #4a4440;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.40),
0 1px 2px rgba(0,0,0,0.30);
}
.doc-keys span.red {
background: linear-gradient(to bottom, #cc6058 0%, #922e28 55%, #521410 100%);
border-top-color: #d87070;
border-bottom-color: #1e0808;
}
.doc-keys span.amber {
background: linear-gradient(to bottom, #e4bc6c 0%, #b87c28 55%, #6c3e08 100%);
border-top-color: #ecd080;
border-bottom-color: #201008;
}
/* =========================================
Responsive
========================================= */
@media screen and (max-width: 1280px) {
.doc-layout {
grid-template-columns: 210px minmax(0, 1fr);
}
.doc-layout-right {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 7px;
}
.doc-footer {
grid-template-columns: 1fr 110px 44px 110px;
}
.doc-keys {
display: none;
}
}
@media screen and (max-width: 980px) {
.doc-layout,
.doc-layout-lower,
.doc-layout-right {
grid-template-columns: 1fr;
}
.doc-footer {
grid-template-columns: 1fr;
height: auto;
padding: 8px 10px;
}
.doc-footer-sliders {
justify-content: center;
}
.doc-date,
.doc-knob {
justify-self: center;
}
}
/* =========================================
CLBI Nations & Factions inline-theme support
원본 표 구조 유지 / 외곽 패널 4px 패딩만 CSS에서 담당
========================================= */
body.page-국가_및_조합 .liberty-content-main .mw-parser-output > .clbi-nations-board,
body.page-Nations_\&_Factions .liberty-content-main .mw-parser-output > .clbi-nations-board {
position: relative;
display: block;
width: 100%;
margin: 0 !important;
padding: 4px !important;
box-sizing: border-box;
background: #1d1d1d;
border: 1px solid #050505;
border-radius: 0;
color: #e2e2e2;
overflow: visible;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
}
body.page-국가_및_조합 .clbi-nations-board .clbi-nations-table,
body.page-Nations_\&_Factions .clbi-nations-board .clbi-nations-table {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
}
body.page-국가_및_조합 .clbi-nations-board a:not(.new):not(.external),
body.page-Nations_\&_Factions .clbi-nations-board a:not(.new):not(.external) {
color: #e2e2e2 !important;
text-decoration: none !important;
}
body.page-국가_및_조합 .clbi-nations-board a:not(.new):not(.external):hover,
body.page-Nations_\&_Factions .clbi-nations-board a:not(.new):not(.external):hover {
color: #ffffff !important;
text-decoration: none !important;
}
body.page-국가_및_조합 .clbi-nations-board img,
body.page-Nations_\&_Factions .clbi-nations-board img {
vertical-align: middle;
}
/* =====================================================================
CLBI Nations Tabpanel — clean baseline
기준:
- 이전 실험 계열(v2/state/existence/simple) 사용 금지
- 버튼 6개: 각 171px
- 버튼 사이 및 남극-제목 사이: 2px 배경 노출
- 당대 존재 국가: 남은 폭 전체
- 좌측 지리 타이틀 칸: 160px
- 상단 패널과 버튼 사이: 4px
- 버튼 하단과 정보 패널 상단 사이: 0px
===================================================================== */
.clbi-nations-tabpanel,
.clbi-nations-tabpanel * {
box-sizing:border-box;
}
/* 격리 테스트용 상단 더미 패널 */
.clbi-nations-tabpanel-test-upper {
display:flex;
align-items:center;
justify-content:center;
height:96px;
margin:0;
padding:0;
background:#1d1d1d;
border:1px solid #050505;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
color:#e2e2e2;
font-size:12px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
}
/* 투명 래퍼: 24px 탭 높이 + 위쪽 패널과의 일반 4px 간격 */
.clbi-nations-tabpanel {
position:relative !important;
display:block !important;
width:100% !important;
margin:28px 0 0 0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
transform:none !important;
}
/* 배경 없는 탭 행 */
.clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs {
position:absolute !important;
left:0 !important;
right:0 !important;
top:-24px !important;
display:grid !important;
grid-template-columns:repeat(6, 175px) minmax(0, 1fr) !important;
column-gap:2px !important;
row-gap:0 !important;
align-items:stretch !important;
justify-items:stretch !important;
width:100% !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
font-size:0 !important;
line-height:0 !important;
white-space:nowrap !important;
overflow:visible !important;
transform:none !important;
z-index:2 !important;
}
/* MediaWiki가 span들을 p로 감싸도 grid 자식 관계가 깨지지 않게 한다. */
.clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
position:relative !important;
top:auto !important;
bottom:auto !important;
left:auto !important;
right:auto !important;
transform:none !important;
translate:none !important;
display:flex !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
margin:0 !important;
padding:0 8px !important;
flex:none !important;
justify-self:stretch !important;
align-self:stretch !important;
align-items:center !important;
justify-content:center !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;
color:#e2e2e2 !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
white-space:nowrap !important;
vertical-align:top !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab {
cursor:pointer !important;
user-select:none !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:hover,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:focus {
color:#ffffff !important;
background:#242424 !important;
outline:0 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
grid-column:7 / 8 !important;
pointer-events:none !important;
cursor:default !important;
}
/* 선택 탭과 제목 탭은 아래 정보 패널의 #1d1d1d 표면과 직접 이어진다. */
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
color:#ffffff !important;
background:#1d1d1d !important;
border-bottom-color:#1d1d1d !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
z-index:3 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
content:"";
position:absolute;
left:-1px;
right:-1px;
bottom:-1px;
height:1px;
background:#1d1d1d;
pointer-events:none;
z-index:4;
}
/* 실제 정보 패널: 상단 접합부는 활성 탭/제목 탭과 #1d1d1d로 이어지게 하고, 좌우/하단 프레임만 남긴다. */
.clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
position:relative !important;
z-index:1 !important;
display:block !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:8px !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-top:0 !important;
border-radius:0 !important;
box-shadow:
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
transform:none !important;
}
.clbi-nations-tabpanel-continent {
display:block;
margin:0 !important;
padding:0 !important;
}
.clbi-nations-tabpanel-continent[hidden],
.clbi-nations-tabpanel-continent:not(.is-active) {
display:none !important;
}
.clbi-nations-tabpanel-row {
display:grid !important;
grid-template-columns:160px minmax(0,1fr) !important;
gap:4px !important;
margin:0 0 4px 0 !important;
padding:0 !important;
min-width:0 !important;
align-items:stretch !important;
}
.clbi-nations-tabpanel-row:last-child {
margin-bottom:0 !important;
}
.clbi-nations-tabpanel-region {
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:24px !important;
margin:0 !important;
padding:0 6px !important;
background:transparent !important;
color:#e2e2e2 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.25 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}
.clbi-nations-tabpanel-well {
display:block !important;
min-width:0 !important;
min-height:24px !important;
margin:0 !important;
padding:3px 8px !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;
color:#e2e2e2 !important;
font-size:11px !important;
font-weight:400 !important;
line-height:1.5 !important;
text-align:center !important;
word-break:keep-all !important;
}
.clbi-nations-tabpanel-well a {
display:inline !important;
color:#e2e2e2 !important;
text-decoration:none !important;
}
.clbi-nations-tabpanel-well a:hover {
color:#ffffff !important;
text-decoration:none !important;
}
/* =====================================================================
Nations tabpanel — no-overlap seam fix
원리:
- #050505가 버튼 아래로 삐져나온 원인은 활성 버튼/제목 플레이트를 25px로 늘리고
margin-bottom:-1px로 body 안쪽에 겹치게 한 구조다.
- border-right / border-left / inset stroke는 요소 높이 전체에 그려지므로,
요소가 1px 내려가면 세로 stroke도 같이 1px 내려간다.
- 따라서 겹침으로 연결하지 않고, 실제 버튼 높이를 24px border-box로 고정한다.
- 활성 버튼/제목 플레이트의 하단 stroke만 제거하고, body의 top border도 제거해서
같은 #1d1d1d 면이 맞닿게 한다.
===================================================================== */
.clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title,
.clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
box-sizing:border-box !important;
}
.clbi-nations-tabpanel {
margin-top:28px !important;
}
.clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs {
top:-24px !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
align-items:start !important;
overflow:visible !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
height:24px !important;
min-height:24px !important;
max-height:24px !important;
margin-top:0 !important;
margin-bottom:0 !important;
align-self:start !important;
box-sizing:border-box !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
height:24px !important;
min-height:24px !important;
max-height:24px !important;
margin-bottom:0 !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-bottom:0 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
z-index:5 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active:hover,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active:focus,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
background:#1d1d1d !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab::before,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::before,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after,
.clbi-nations-tabpanel > .clbi-nations-tabpanel-body::before,
.clbi-nations-tabpanel > .clbi-nations-tabpanel-body::after {
content:none !important;
display:none !important;
}
.clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
margin-top:0 !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-top:0 !important;
box-shadow:
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}
/* =====================================================================
Nations tabpanel — button surface width 171px
기준:
- Photoshop 실측 기준으로 맞출 값은 버튼 border-box가 아니라 #1d1d1d 표면 픽셀 폭이다.
- 현재 버튼은 양쪽 border/inset 마감이 총 4px을 차지한다.
- 따라서 #1d1d1d 표면 171px을 만들기 위해 대륙 탭 track은 175px로 둔다.
- 하단 지역 grid column 160px과 no-overlap seam 구조는 유지한다.
===================================================================== */
.clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs {
grid-template-columns:repeat(6, 175px) minmax(0, 1fr) !important;
}
/* =====================================================================
Nations tabpanel text color normalization
기준:
- 선택되지 않은 대륙 버튼 텍스트는 sidebar-lang-apply-mark의 비활성 상태와 같은 #626262를 쓴다.
- 선택/호버 상태는 기존처럼 흰색 계열로 유지한다.
- 하단 지역 카테고리 텍스트는 흐린 회색이 아니라 #ffffff로 정상화한다.
===================================================================== */
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:not(.is-active) {
color:#626262 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:not(.is-active):hover,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:not(.is-active):focus {
color:#ffffff !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-region {
color:#ffffff !important;
}
/* Nations continent keyboard hover resync — 20260707
원인:
- 마우스가 이전 대륙 탭 위에 남아 있는 상태에서 Ctrl+Q / Ctrl+E 같은 단축키로
active 탭을 바꾸면 브라우저의 실제 :hover 대상은 이동하지 않는다.
- 이전 탭에 :focus까지 남아 있으면 한 번 더 단축키를 눌러도 이전 탭의 hover/focus
표면이 계속 살아 있어, 사용자는 여러 탭이 동시에 선택된 것처럼 느낀다.
해결:
- NationsPanel.js가 키보드 전환 직후 현재 포인터 아래의 stale 탭과 stale focus를 검증한다.
- stale 상태일 때만 is-keyboard-switching을 붙이고, 포인터가 실제로 움직이면 즉시 해제한다.
- 여기서는 그 짧은 보정 시간 동안 비활성 탭의 :hover/:focus 표면을 기본 표면으로 되돌린다. */
.clbi-nations-tabpanel.is-keyboard-switching .clbi-nations-tabpanel-tab:not(.is-active):hover,
.clbi-nations-tabpanel.is-keyboard-switching .clbi-nations-tabpanel-tab:not(.is-active):focus {
background:#1d1d1d !important;
color:#626262 !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;
z-index:auto !important;
}
/* Nations continent exact stale-hover marker — 20260708
원인:
- 로딩/warm-cache 보정 이후 대륙 전환은 live delegate, NationsPanel API, 단축키 API가
같은 DOM을 공유한다. 이때 마우스가 이전 탭 위에 그대로 있거나 이전 클릭 focus가
남아 있으면, panel-level 보정만으로는 어떤 탭의 hover/focus가 진짜 stale인지
충분히 특정하지 못할 수 있다.
해결:
- NationsPanel.js가 단축키/키보드 전환 직후 stale로 판정된 정확한 탭에만
is-keyboard-stale-hover를 붙인다.
- 여기서는 그 탭의 :hover/:focus 표면만 기본 비활성 표면으로 되돌린다.
- 포인터 이동, pointerleave, 클릭, blur가 발생하면 JS가 이 class를 즉시 제거한다. */
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-keyboard-stale-hover:not(.is-active),
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-keyboard-stale-hover:not(.is-active):hover,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-keyboard-stale-hover:not(.is-active):focus,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-keyboard-stale-hover:not(.is-active):focus-visible {
background:#1d1d1d !important;
color:#626262 !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;
z-index:auto !important;
outline:none !important;
}
/* =====================================================================
Nations Globe Window — real-world prototype
목적:
- 국가 및 조합 판도 PNG 슬롯을 WebGL 지구본 창으로 교체한다.
- 하단 clbi-nations-tabpanel 기준은 건드리지 않는다.
- QGIS 판도 데이터가 들어오기 전까지 현실 세계 TopoJSON/GeoJSON을 로딩한다.
===================================================================== */
.clbi-nations-globe-window {
position:relative;
width:100%;
height:360px;
min-height:360px;
box-sizing:border-box;
overflow:hidden;
isolation:isolate;
background:#030303;
border:1px solid #050505;
border-radius:0;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #101010;
color:#e2e2e2;
font-size:11px;
line-height:1;
text-shadow:1px 1px 0 #000;
}
.clbi-nations-globe-window::before {
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
/* Static CSS star dots were removed here. Dynamic stars and planets are
still drawn by NationsGlobe.js; this pseudo layer now only keeps the
window glow/vignette/background. */
background:
radial-gradient(ellipse at 50% 48%, rgba(130,170,210,0.10) 0%, rgba(80,110,145,0.030) 23%, transparent 48%),
radial-gradient(ellipse at 50% 50%, rgba(8,14,22,0.10) 0%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0.90) 100%),
linear-gradient(to bottom, #05070a 0%, #020305 58%, #000000 100%);
}
.clbi-nations-globe-window::after {
content:"";
position:absolute;
inset:-40px 0;
z-index:7;
pointer-events:none;
opacity:.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;
}
.clbi-nations-globe-stage {
position:absolute;
inset:0;
z-index:2;
background:transparent;
overflow:hidden;
cursor:grab;
touch-action:none;
}
.clbi-nations-globe-stage:active,
.clbi-nations-globe-window.is-dragging .clbi-nations-globe-stage {
cursor:grabbing;
}
.clbi-nations-globe-stage canvas {
display:block;
width:100% !important;
height:100% !important;
outline:0;
}
.clbi-nations-globe-vignette {
position:absolute;
inset:0;
z-index:5;
pointer-events:none;
background:
radial-gradient(ellipse at 50% 48%, transparent 0%, transparent 38%, rgba(0,0,0,0.22) 70%, rgba(0,0,0,0.72) 100%),
linear-gradient(to right, rgba(0,0,0,0.42) 0%, transparent 16%, transparent 84%, rgba(0,0,0,0.42) 100%),
linear-gradient(to bottom, rgba(255,255,255,0.030) 0%, transparent 18%, transparent 78%, rgba(0,0,0,0.26) 100%);
}
.clbi-nations-globe-topbar,
.clbi-nations-globe-bottombar,
.clbi-nations-globe-sidecard,
.clbi-nations-globe-loading,
.clbi-nations-globe-error {
position:absolute;
z-index:9;
box-sizing:border-box;
pointer-events:none;
}
.clbi-nations-globe-topbar {
left:0;
right:0;
top:0;
height:24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:0 7px;
background:rgba(8,8,8,0.84);
border:0;
border-bottom:1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
inset 0 -1px 0 rgba(0,0,0,0.72);
}
.clbi-nations-globe-title {
min-width:0;
color:#e2e2e2;
font-size:10px;
font-weight:700;
letter-spacing:.35px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.clbi-nations-globe-status {
flex:0 0 auto;
color:#626262;
font-size:9px;
font-weight:700;
letter-spacing:.45px;
white-space:nowrap;
}
.clbi-nations-globe-bottombar {
left:0;
right:0;
bottom:0;
height:24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:0 7px;
background:rgba(8,8,8,0.78);
border:0;
border-top:1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.045),
inset 0 -1px 0 rgba(0,0,0,0.72);
}
.clbi-nations-globe-readout,
.clbi-nations-globe-controls {
min-width:0;
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.clbi-nations-globe-controls {
flex:0 0 auto;
display:flex;
align-items:center;
gap:4px;
pointer-events:auto;
}
.clbi-nations-globe-btn {
display:inline-flex;
align-items:center;
justify-content:center;
height:18px;
min-width:42px;
padding:0 5px;
box-sizing:border-box;
background:#101010;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#e2e2e2;
font-size:9px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
cursor:pointer;
}
.clbi-nations-globe-btn:hover,
.clbi-nations-globe-btn.is-active {
background:#1d1d1d;
border-color:#555555 #333333 #050505 #333333;
color:#ffffff;
}
/* 지구본 AUTO/RESET 버튼 효과를 좌측 NEWS 버튼 공식과 동일하게 통일한다. */
.clbi-nations-globe-btn {
background:#1d1d1d !important;
border:1px solid #050505 !important;
color:#e2e2e2 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
transition:none !important;
outline:0 !important;
}
.clbi-nations-globe-btn:hover,
.clbi-nations-globe-btn:focus,
.clbi-nations-globe-btn:focus-visible,
.clbi-nations-globe-btn.is-active {
background:#1d1d1d !important;
border-color:#050505 !important;
color:#ffffff !important;
outline: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;
}
.clbi-nations-globe-btn:active,
.clbi-nations-globe-btn.is-active:active {
background:#101010 !important;
border-color:#050505 !important;
color:#e2e2e2 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
}
.clbi-nations-globe-loading,
.clbi-nations-globe-error {
left:50%;
top:50%;
transform:translate(-50%, -50%);
min-width:210px;
max-width:calc(100% - 32px);
padding:8px 10px;
background:rgba(8,8,8,0.92);
border:1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.055),
inset 0 -1px 0 rgba(0,0,0,0.72),
0 8px 24px rgba(0,0,0,0.54);
color:#e2e2e2;
font-size:10px;
font-weight:700;
line-height:1.35;
text-align:center;
white-space:normal;
}
.clbi-nations-globe-error {
color:#c88a80;
}
.clbi-nations-globe-window.is-ready .clbi-nations-globe-loading,
.clbi-nations-globe-window.has-error .clbi-nations-globe-loading {
display:none;
}
.clbi-nations-globe-window:not(.has-error) .clbi-nations-globe-error {
display:none;
}
@media screen and (max-width:900px) {
.clbi-nations-globe-window {
height:300px;
min-height:300px;
}
.clbi-nations-globe-controls {
display:none;
}
}
/* =====================================================================
CLBI Nations — individual existing-panel layout
Scope: 국가 및 조합 상단 개별 패널
- No clbi-nations-board outer frame.
- Panels are same-level modules.
- Gaps are real #080808 background.
- Map row order: button / 4px gap / globe panel / 4px gap / button.
===================================================================== */
.clbi-nations-panel-stack,
.clbi-nations-panel-stack * {
box-sizing:border-box;
}
.clbi-nations-panel-stack {
--clbi-nations-gap:4px;
--clbi-nations-side-button-w:60px;
--clbi-nations-map-h:480px;
display:flex !important;
flex-direction:column !important;
gap:var(--clbi-nations-gap) !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
background:#080808 !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
color:#e2e2e2;
font-size:11px;
line-height:1.4;
}
.clbi-nations-panel-stack > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}
.clbi-nations-panel-stack > br,
.clbi-nations-panel-stack > p:empty,
.clbi-nations-panel-stack > p:has(> br:only-child) {
display:none !important;
}
.clbi-nations-era-panel,
.clbi-nations-module-panel,
.clbi-nations-section-panel {
position:relative !important;
width:100% !important;
margin:0 !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;
overflow:hidden !important;
}
.clbi-nations-era-panel {
min-height:28px !important;
padding:8px !important;
display:flex !important;
align-items:stretch !important;
justify-content:center !important;
}
.clbi-nations-era-panel > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}
.clbi-nations-era-panel > .mw-collapsible {
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
}
.clbi-nations-era-panel > .mw-collapsible.mw-collapsed {
display:none !important;
}
.clbi-nations-era-panel .clbi-nations-era-title-plate {
position:relative !important;
top:auto !important;
width:100% !important;
min-height:30px !important;
height:26px !important;
margin:0 !important;
padding:0 10px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#080808 !important;
border:0 !important;
border-radius: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;
color:#e2e2e2 !important;
font-family:inherit !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}
.clbi-nations-section-panel {
height:24px !important;
min-height:24px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.clbi-nations-section-title {
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 8px !important;
color:#e2e2e2 !important;
font-family:inherit !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}
.clbi-nations-map-row {
display:flex !important;
align-items:stretch !important;
gap:var(--clbi-nations-gap) !important;
width:100% !important;
height:var(--clbi-nations-map-h) !important;
min-height:var(--clbi-nations-map-h) !important;
margin:0 !important;
padding:0 !important;
background:#080808 !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}
.clbi-nations-map-row > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}
.clbi-nations-era-side-slot {
position:relative !important;
flex:0 0 var(--clbi-nations-side-button-w) !important;
width:var(--clbi-nations-side-button-w) !important;
min-width:var(--clbi-nations-side-button-w) !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}
.clbi-nations-era-side-slot > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}
.clbi-nations-era-side-slot > .mw-collapsible {
position:absolute !important;
inset:0 !important;
height:100% !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
overflow:visible !important;
pointer-events:none !important;
}
.clbi-nations-era-side-slot > .mw-collapsible.mw-collapsed {
display:none !important;
}
.clbi-nations-era-side-button {
position:absolute !important;
top:0 !important;
bottom:0 !important;
width:var(--clbi-nations-side-button-w) !important;
height:100% !important;
margin:0 !important;
padding:0 6px !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:center !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;
color:#e2e2e2 !important;
font-family:inherit !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
white-space:nowrap !important;
cursor:pointer !important;
user-select:none !important;
overflow:hidden !important;
pointer-events:auto !important;
}
.clbi-nations-era-side-button-left {
left:0 !important;
right:auto !important;
}
.clbi-nations-era-side-button-right {
right:0 !important;
left:auto !important;
}
.clbi-nations-era-side-button:hover,
.clbi-nations-era-side-button:focus {
background:#1d1d1d !important;
border-color:#050505 !important;
color:#ffffff !important;
outline: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;
}
.clbi-nations-era-side-button:active {
background:#101010 !important;
border-color:#050505 !important;
color:#e2e2e2 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
}
.clbi-nations-era-side-button * {
pointer-events:none !important;
}
.clbi-nations-era-side-label {
display:inline-block !important;
line-height:1 !important;
color:inherit !important;
font-size:24px !important;
font-weight:700 !important;
letter-spacing:0 !important;
writing-mode:horizontal-tb !important;
text-orientation:mixed !important;
}
.clbi-nations-globe-panel {
position:relative !important;
flex:1 1 auto !important;
min-width:0 !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
background:#080808 !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}
.clbi-nations-globe-panel > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}
.clbi-nations-globe-panel > .clbi-nations-globe-window {
width:100% !important;
height:var(--clbi-nations-map-h) !important;
min-height:var(--clbi-nations-map-h) !important;
margin:0 !important;
}
.clbi-nations-module-title {
height:24px !important;
min-height:24px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
padding:0 8px !important;
background:#1d1d1d !important;
border-bottom:0 !important;
color:#e2e2e2 !important;
font-family:inherit !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
}
.clbi-nations-module-body {
margin:0 !important;
padding:8px 8px 4px 8px !important;
background:#1d1d1d !important;
box-shadow:
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}
.clbi-nations-module-body > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}
.clbi-nations-force-grid {
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:20px !important;
width:100% !important;
margin:0 !important;
padding:0 72px !important;
box-sizing:border-box !important;
}
.clbi-nations-force-card {
min-width:0 !important;
height:140px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}
.clbi-nations-force-card > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}
.clbi-nations-force-card > .mw-collapsible {
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
}
.clbi-nations-force-card > .mw-collapsible.mw-collapsed {
display:none !important;
}
@media screen and (max-width:900px) {
.clbi-nations-panel-stack {
--clbi-nations-side-button-w:52px;
--clbi-nations-map-h:320px;
}
.clbi-nations-era-side-label {
font-size:20px !important;
}
.clbi-nations-force-grid {
gap:8px !important;
padding:0 !important;
}
}
/* =====================================================================
CLBI Nations — Historical Events panel / scoped clean block
Basis:
- Title copies the actual side information title structure:
min-height 34px, transparent title field over the parent #1d1d1d face,
no independent title background or shadow.
- Body keeps the existing Nations module-panel outer #050505 frame.
- Inner well follows the existing tabpanel-body direction without adding
another #050505 border.
- Event items keep the accepted compact #101010 item surface.
===================================================================== */
.clbi-nations-history-panel > .clbi-nations-module-title {
height:auto !important;
min-height:34px !important;
max-height:none !important;
margin:0 !important;
padding:0 2px !important;
box-sizing:border-box !important;
font-weight:700 !important;
font-size:12px !important;
color:#e2e2e2 !important;
border:0 !important;
background:transparent !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
box-shadow:none !important;
}
.clbi-nations-history-panel > .clbi-nations-module-body.clbi-nations-history-body {
position:relative !important;
z-index:1 !important;
display:block !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 8px 8px 8px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:0 !important;
border-radius:0 !important;
box-shadow:
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
transform:none !important;
overflow:hidden !important;
}
.clbi-nations-history-panel + .clbi-nations-tabpanel {
margin-top:24px !important;
}
.clbi-nations-history-list {
display:grid !important;
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
gap:2px !important;
width:100% !important;
margin:0 !important;
padding:3px !important;
box-sizing:border-box !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;
}
.clbi-nations-history-item {
display:grid !important;
grid-template-columns:92px minmax(0, 1fr) !important;
align-items:center !important;
gap:2px !important;
min-width:0 !important;
min-height:16px !important;
height:auto !important;
margin:0 !important;
padding:2px !important;
box-sizing:border-box !important;
background:#101010 !important;
border:1px solid #050505 !important;
box-shadow:inset 0 1px 0 #1d1d1d !important;
font-size:10px !important;
line-height:1 !important;
overflow:hidden !important;
color:inherit !important;
}
.clbi-nations-history-period,
.clbi-nations-history-event-name {
min-width:0 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
color:inherit !important;
}
.clbi-nations-history-period {
font-size:9px !important;
font-weight:700 !important;
letter-spacing:.01em !important;
}
.clbi-nations-history-event-name {
font-size:10px !important;
font-weight:700 !important;
}
.clbi-nations-history-event-name a {
display:inline !important;
color:inherit !important;
text-decoration:none !important;
}
.clbi-nations-history-item-major {
background:#101010 !important;
border-color:#050505 !important;
box-shadow:inset 0 1px 0 #1d1d1d !important;
}
@media (max-width:1180px) {
.clbi-nations-history-list {
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width:820px) {
.clbi-nations-history-list {
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
}
/* CLBI Nations / Historical Events year-tabs
* Baseline remains clbiwiki-nations-historical-events-title-exact-side.
* The selector uses a separate JS tab system matching the country panel's active/hidden model:
* .is-active on the selected tab and hidden on inactive pages.
* Button surface is copied from the left/right sidebar action buttons.
*/
.clbi-nations-history-panel > .clbi-nations-module-body.clbi-nations-history-body {
display:block !important;
}
.clbi-nations-history-pages {
display:block !important;
width:100% !important;
margin:0 0 2px 0 !important;
padding:0 !important;
box-sizing:border-box !important;
}
.clbi-nations-history-page {
display:grid !important;
}
.clbi-nations-history-page[hidden],
.clbi-nations-history-page:not(.is-active) {
display:none !important;
}
.clbi-nations-history-year-well {
display:block !important;
width:100% !important;
margin:0 !important;
padding:3px !important;
box-sizing:border-box !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;
}
.clbi-nations-history-year-list {
display:grid !important;
grid-template-columns:repeat(11, minmax(0, 1fr)) !important;
gap:2px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
.clbi-nations-history-year-list > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
.clbi-nations-history-year-list br {
display:none !important;
}
.clbi-nations-history-year-button {
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-width:0 !important;
height:26px !important;
min-height:26px !important;
max-height:26px !important;
margin:0 !important;
padding:0 7px !important;
box-sizing:border-box !important;
background:
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;
border:1px solid !important;
border-color:
#333333
#202020
#181818
#202020 !important;
border-radius:0 !important;
color:#e2e2e2 !important;
cursor:pointer !important;
font-size:11px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040) !important;
user-select:none !important;
}
.clbi-nations-history-year-button:hover,
.clbi-nations-history-year-button:focus {
background:
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;
border-color:
#444444
#333333
#202020
#333333 !important;
color:#ffffff !important;
outline:0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
0 0 0 1px rgba(255,255,255,0.018) !important;
}
.clbi-nations-history-year-button.is-active,
.clbi-nations-history-year-button:active {
background:
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;
border-color:
#050505
#202020
#333333
#202020 !important;
color:#ffffff !important;
box-shadow:
inset 1px 1px 3px rgba(0,0,0,0.82),
inset -1px -1px 0 rgba(255,255,255,0.035) !important;
}
@media (max-width:1180px) {
.clbi-nations-history-year-list {
grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
}
}
@media (max-width:820px) {
.clbi-nations-history-year-list {
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}
}
/* CLBI Nations / Historical Events year buttons — era-side-button visual correction
* The previous version used sidebar profile action button gradients.
* This override uses the Nations side era button surface itself:
* background #1d1d1d, #050505 1px border, #555555/#101010 inset frame.
* Geometry only is adapted to a horizontal 11-button row.
*/
.clbi-nations-history-year-list {
display:grid !important;
grid-template-columns:repeat(11, minmax(0, 1fr)) !important;
gap:2px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
.clbi-nations-history-year-list > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
.clbi-nations-history-year-list br {
display:none !important;
}
.clbi-nations-history-year-button {
position:relative !important;
top:auto !important;
bottom:auto !important;
left:auto !important;
right:auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-width:0 !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
margin:0 !important;
padding:0 6px !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;
color:#e2e2e2 !important;
cursor:pointer !important;
font-family:inherit !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
user-select:none !important;
}
.clbi-nations-history-year-button:hover,
.clbi-nations-history-year-button:focus {
background:#1d1d1d !important;
border-color:#050505 !important;
color:#ffffff !important;
outline: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;
}
.clbi-nations-history-year-button.is-active,
.clbi-nations-history-year-button:active {
background:#101010 !important;
border-color:#050505 !important;
color:#e2e2e2 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
}
/* Keep the accepted history-to-country visual gap model from title-exact-side. */
.clbi-nations-panel-stack > .clbi-nations-history-panel + .clbi-nations-tabpanel,
.clbi-nations-history-panel + .clbi-nations-tabpanel {
margin-top:24px !important;
}
@media (max-width:1180px) {
.clbi-nations-history-year-list {
grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
}
}
@media (max-width:820px) {
.clbi-nations-history-year-list {
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}
}
/* CLBI Nations / Historical Events year-content frame gap correction
* Match the country information panel rhythm: the structural #1d1d1d frame
* between two internal wells should read as 4px, not the 2px item gap.
* This changes only the gap between event content well and year-button well.
*/
.clbi-nations-history-pages {
margin:0 0 4px 0 !important;
}
/* CLBI Nations / Historical Events fixed five-row viewport
* The event well keeps a stable five-row visual height even when a year has no events.
* More than five vertical rows scroll inside the event well.
*/
.clbi-nations-history-page {
position:relative !important;
height:calc((18px * 5) + (2px * 4) + (3px * 2)) !important;
min-height:calc((18px * 5) + (2px * 4) + (3px * 2)) !important;
max-height:calc((18px * 5) + (2px * 4) + (3px * 2)) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
overscroll-behavior:contain !important;
align-content:start !important;
grid-auto-rows:18px !important;
}
.clbi-nations-history-page[hidden],
.clbi-nations-history-page:not(.is-active) {
display:none !important;
}
.clbi-nations-history-empty {
position:absolute !important;
inset:3px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-width:0 !important;
min-height:0 !important;
box-sizing:border-box !important;
color:inherit !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
white-space:nowrap !important;
pointer-events:none !important;
}
.clbi-nations-history-empty-en {
display:none !important;
}
html[lang|="en"] .clbi-nations-history-empty-ko,
body[lang|="en"] .clbi-nations-history-empty-ko {
display:none !important;
}
html[lang|="en"] .clbi-nations-history-empty-en,
body[lang|="en"] .clbi-nations-history-empty-en {
display:inline !important;
}
/* CLBI Nations / direct country body fill
* Keep real catlinks and the confirmed historical-events 5-row state.
* JS sets .clbi-nations-tabpanel-body height directly; CSS only protects overflow.
*/
body.page-국가_및_조합 .clbi-nations-tabpanel-body.clbi-nations-country-body-filled,
body.page-Nations_\&_Factions .clbi-nations-tabpanel-body.clbi-nations-country-body-filled,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel-body.clbi-nations-country-body-filled {
overflow:hidden !important;
}
/* CLBI / universal fill-to-real-catlinks contract
* No fake category panel.
* No catlinks movement.
* No height-afterpaint JS.
*
* Structure:
* content frame
* content body flex chain
* .clbi-fill-remaining -> fills remaining body space
* real MediaWiki catlinks -> final flex item
*
* The 4px gaps are owned by the parent flex container, not catlinks margins.
*/
/* The content frame and MediaWiki wrappers become a vertical flex chain only
when a page explicitly has a fill-remaining body block. */
.liberty-content-main:has(.clbi-fill-remaining) {
display:flex !important;
flex-direction:column !important;
min-height:0 !important;
overflow:hidden !important;
}
.liberty-content-main:has(.clbi-fill-remaining) > #mw-content-text,
.liberty-content-main:has(.clbi-fill-remaining) article#mw-content-text,
.liberty-content-main:has(.clbi-fill-remaining) .mw-body-content,
.liberty-content-main:has(.clbi-fill-remaining) .mw-content-ltr {
display:flex !important;
flex-direction:column !important;
flex:1 1 auto !important;
min-height:0 !important;
overflow:hidden !important;
}
/* Actual relation owner: this parent supplies the 4px gap above catlinks and
the 4px padding below it. The background here is the normal Nations gap
color, so the revealed interval is #080808 rather than #1d1d1d. */
.liberty-content-main:has(.clbi-fill-remaining) .mw-parser-output:has(.clbi-fill-remaining) {
display:flex !important;
flex-direction:column !important;
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
gap:4px !important;
padding-bottom:4px !important;
box-sizing:border-box !important;
background:#080808 !important;
overflow:hidden !important;
}
/* The block that should consume the body space. This is universal; Nations
simply opts its stack into the rule with .clbi-fill-remaining. */
.liberty-content-main:has(.clbi-fill-remaining) .mw-parser-output:has(.clbi-fill-remaining) > .clbi-fill-remaining {
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
}
/* Nations is one consumer of the universal contract. */
.clbi-fill-remaining.clbi-nations-panel-stack > .clbi-nations-tabpanel {
flex:1 1 auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:visible !important;
}
.clbi-fill-remaining.clbi-nations-panel-stack > .clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
}
/* Real MediaWiki catlinks as the final flex item.
Visual panel rules are single-sourced in Theme.css. */
.liberty-content-main:has(.clbi-fill-remaining) .mw-parser-output:has(.clbi-fill-remaining) > #catlinks,
.liberty-content-main:has(.clbi-fill-remaining) .mw-parser-output:has(.clbi-fill-remaining) > .catlinks {
flex:0 0 auto !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
}
/* =====================================================================
CLBI Nations — decade-era content switching
- Era buttons now switch the actual active decade state.
- 1950 keeps the existing populated panels.
- Empty decades expose their own WIP panels while the globe reloads that
decade's data URLs and displays the globe error layer if files are absent.
===================================================================== */
.clbi-nations-era-title-plate[hidden],
.clbi-nations-era-title-plate:not(.is-active)[data-era],
.clbi-nations-era-content[hidden],
.clbi-nations-era-content:not(.is-active) {
display:none !important;
}
.clbi-nations-era-content {
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}
.clbi-nations-era-content > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}
.clbi-nations-era-side-slot > .clbi-nations-era-side-button {
position:absolute !important;
inset:0 auto 0 0 !important;
pointer-events:auto !important;
}
.clbi-nations-era-side-slot-right > .clbi-nations-era-side-button,
.clbi-nations-era-side-button-right {
left:auto !important;
right:0 !important;
}
.clbi-nations-history-year-list[data-decade-only="1"] {
grid-template-columns:repeat(10, minmax(0, 1fr)) !important;
}
.clbi-nations-era-wip .clbi-nations-tabpanel-body {
min-height:96px !important;
}
.clbi-nations-era-wip .clbi-nations-tabpanel-continent[hidden] {
display:none !important;
}
.clbi-nations-era-wip .clbi-nations-tabpanel-continent.is-active {
display:block !important;
}
.clbi-nations-era-wip .clbi-nations-tabpanel-well {
min-height:54px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
.clbi-nations-era-wip .clbi-nations-history-empty,
.clbi-nations-era-wip-message {
color:#e2e2e2 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.35 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}
.clbi-nations-era-wip-message-en {
display:none !important;
}
html[lang|="en"] .clbi-nations-era-wip-message-ko,
body[lang|="en"] .clbi-nations-era-wip-message-ko {
display:none !important;
}
html[lang|="en"] .clbi-nations-era-wip-message-en,
body[lang|="en"] .clbi-nations-era-wip-message-en {
display:inline !important;
}
@media (max-width:1180px) {
.clbi-nations-history-year-list[data-decade-only="1"] {
grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
}
}
@media (max-width:820px) {
.clbi-nations-history-year-list[data-decade-only="1"] {
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}
}
/* =====================================================================
CLBI Nations — preserve remaining-space fill inside decade wrapper
The decade-era wrapper sits between .clbi-nations-panel-stack and the
country tab panel, so the older direct-child flex fill needs this bridge.
===================================================================== */
.clbi-fill-remaining.clbi-nations-panel-stack > .clbi-nations-era-content.is-active {
display:flex !important;
flex:1 1 auto !important;
flex-direction:column !important;
gap:var(--clbi-nations-gap) !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
background:#080808 !important;
overflow:visible !important;
}
.clbi-fill-remaining.clbi-nations-panel-stack > .clbi-nations-era-content.is-active > .clbi-nations-tabpanel {
flex:1 1 auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:visible !important;
}
.clbi-fill-remaining.clbi-nations-panel-stack > .clbi-nations-era-content.is-active > .clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
}
/* Nations globe reload safety: stale loading/error layers must not stay over a ready globe. */
.clbi-nations-globe-window.is-ready .clbi-nations-globe-loading,
.clbi-nations-globe-window.is-ready .clbi-nations-globe-error,
.clbi-nations-globe-window.has-error .clbi-nations-globe-loading {
display:none !important;
}
.clbi-nations-globe-window:not(.has-error) .clbi-nations-globe-error {
display:none !important;
}
/* JSON 기반 국가 목록 렌더링 */
.clbi-nations-list-item {
display:inline-flex !important;
align-items:baseline !important;
justify-content:flex-start !important;
vertical-align:baseline !important;
white-space:nowrap !important;
word-break:keep-all !important;
overflow-wrap:normal !important;
break-inside:avoid !important;
page-break-inside:avoid !important;
}
.clbi-nations-list-flag {
display:inline-block;
position:relative;
top:var(--flag-y, 0px);
flex:0 0 auto;
height:auto;
max-height:16px;
object-fit:contain;
vertical-align:-2px;
margin-right:3px;
background:#080808;
box-sizing:content-box;
}
.clbi-nations-list-flag.has-border {
border:1px solid #050505;
box-shadow:0 0 0 1px #2b2b2b;
}
.clbi-nations-list-flag.is-top {
--flag-y:-1px;
}
.clbi-nations-list-link,
.clbi-nations-list-label {
color:#e2e2e2 !important;
text-decoration:none !important;
white-space:nowrap !important;
word-break:keep-all !important;
overflow-wrap:normal !important;
}
.clbi-nations-list-link:hover {
color:#ffffff !important;
text-decoration:none !important;
}
.clbi-nations-list-divider {
display:inline-block;
margin:0 5px;
color:#777777;
}
/* 20260705: 국가 목록 국기 렌더링 정규화
- width 기준으로 렌더링하면 정방형/세로형 국기가 과대하게 보이고, 가로형 국기는 너무 작아진다.
- 실제 표시는 같은 높이의 flag slot 안에서 맞추고, 없는 파일은 깨진 이미지 대신 결손 슬롯으로 표시한다. */
.clbi-nations-list-item {
align-items:center !important;
}
.clbi-nations-list-flag-slot {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
position:relative !important;
top:var(--flag-y, 0px) !important;
flex:0 0 auto !important;
min-width:14px !important;
max-width:var(--flag-max-w, 24px) !important;
height:14px !important;
margin-right:3px !important;
vertical-align:-2px !important;
overflow:hidden !important;
line-height:0 !important;
}
.clbi-nations-list-flag-slot .clbi-nations-list-flag {
display:block !important;
position:static !important;
top:auto !important;
width:auto !important;
height:12px !important;
max-width:100% !important;
max-height:12px !important;
margin:0 !important;
vertical-align:middle !important;
object-fit:contain !important;
background:#080808 !important;
box-sizing:border-box !important;
}
.clbi-nations-list-flag-slot .clbi-nations-list-flag.has-border {
border:1px solid #050505 !important;
box-shadow:0 0 0 1px #2b2b2b !important;
}
.clbi-nations-list-flag-slot.is-missing .clbi-nations-list-flag {
display:none !important;
}
.clbi-nations-list-flag-slot.is-missing::before {
content:"";
display:block;
width:16px;
height:10px;
border:1px solid #4a1b1b;
background:repeating-linear-gradient(45deg,#130707 0,#130707 3px,#2a0b0b 3px,#2a0b0b 6px);
box-shadow:0 0 0 1px #2d1111;
box-sizing:border-box;
}
/* 20260705: 국기 테두리 기준 보정
테두리는 16x16px 박스 안에 비율 유지로 들어간 실제 이미지의 외형을 따라간다.
국기를 고정 사각형 테두리에 끼워 맞추지 않는다. */
.clbi-nations-list-flag-slot {
min-width:0 !important;
width:auto !important;
max-width:none !important;
height:18px !important;
overflow:visible !important;
line-height:0 !important;
}
.clbi-nations-list-flag-slot .clbi-nations-list-flag {
width:auto !important;
height:auto !important;
max-width:16px !important;
max-height:16px !important;
object-fit:contain !important;
box-sizing:content-box !important;
}
/* 20260705: 국가 목록 국기 행 정렬/결손 표시 정리
실제 국기 이미지는 16x16 한계 안에서 비율 유지, 테두리는 이미지 외형을 따라간다.
결손 국기는 빨간 대체 표시를 내지 않고 빈 항목처럼 숨긴다. */
.clbi-nations-list-item {
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
vertical-align:middle !important;
line-height:18px !important;
white-space:nowrap !important;
}
.clbi-nations-list-flag-slot {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
position:relative !important;
top:auto !important;
transform:translateY(var(--flag-y, 0px)) !important;
flex:0 0 auto !important;
min-width:0 !important;
width:auto !important;
height:18px !important;
margin-right:3px !important;
overflow:visible !important;
line-height:0 !important;
vertical-align:middle !important;
}
.clbi-nations-list-flag-slot .clbi-nations-list-flag {
display:block !important;
position:static !important;
top:auto !important;
width:auto !important;
height:auto !important;
max-width:16px !important;
max-height:16px !important;
min-width:0 !important;
min-height:0 !important;
margin:0 !important;
object-fit:contain !important;
vertical-align:middle !important;
background:#080808 !important;
box-sizing:content-box !important;
}
.clbi-nations-list-flag-slot .clbi-nations-list-flag.has-border {
border:1px solid #050505 !important;
box-shadow:0 0 0 1px #2b2b2b !important;
}
.clbi-nations-list-flag-slot.is-missing {
display:none !important;
}
.clbi-nations-list-flag-slot.is-missing::before {
content:none !important;
display:none !important;
}
.clbi-nations-list-link,
.clbi-nations-list-label,
.clbi-nations-list-divider {
display:inline-flex !important;
align-items:center !important;
line-height:18px !important;
vertical-align:middle !important;
}
/* 20260705: CLBI 국가 목록 국기 획 단일 기준
국기 획은 사각 border가 아니라 기존 [[파일:...|테두리]] 계열의 alpha drop-shadow를 사용한다. */
.clbi-nations-list-flag-slot {
overflow:visible !important;
}
.clbi-nations-list-flag.has-border,
.clbi-nations-list-flag-slot .clbi-nations-list-flag.has-border {
border:0 !important;
box-shadow:none !important;
outline:0 !important;
background:transparent !important;
filter:var(--clbi-flag-stroke-filter) !important;
}
.clbi-nations-list-flag.is-missing,
.clbi-nations-list-flag-slot.is-missing .clbi-nations-list-flag {
filter:none !important;
}
/* 20260705: 국가 패널 항목 hover 2-state normalization
- gradient / transition 제거.
- 배경 효과 없이 일반 상태와 hover 상태의 텍스트 밝기만 구분한다. */
.clbi-nations-tabpanel .clbi-nations-list-item,
.clbi-nations-tabpanel .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-label {
background:transparent !important;
background-image:none !important;
box-shadow:none !important;
filter:none !important;
transition:none !important;
}
.clbi-nations-tabpanel .clbi-nations-list-item:hover .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-item:focus-within .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-item.is-panel-hovered .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-item:hover .clbi-nations-list-label,
.clbi-nations-tabpanel .clbi-nations-list-item:focus-within .clbi-nations-list-label,
.clbi-nations-tabpanel .clbi-nations-list-item.is-panel-hovered .clbi-nations-list-label {
color:#ffffff !important;
background:transparent !important;
background-image:none !important;
text-decoration:none !important;
}
/* =====================================================================
CLBI Nations — seamless continent/era switching optimization
- Active era remains visually stable while Q/E preview changes only the
lightweight era shell until the final commit.
- Current-era continent panels stay warm in DOM and switch by state only,
avoiding hidden/display layout spikes during globe inertia.
===================================================================== */
.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body {
position:relative !important;
contain:layout paint style !important;
will-change:auto !important;
}
.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent,
.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent[hidden] {
display:block !important;
box-sizing:border-box !important;
contain:layout paint style !important;
}
.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent:not(.is-active) {
position:absolute !important;
left:8px !important;
right:8px !important;
top:8px !important;
margin:0 !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
z-index:0 !important;
}
.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent.is-active {
position:relative !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
z-index:1 !important;
}
.clbi-fill-remaining.clbi-nations-panel-stack.is-era-previewing > .clbi-nations-era-content.is-active {
contain:layout paint style !important;
}
.clbi-fill-remaining.clbi-nations-panel-stack.is-era-previewing > .clbi-nations-era-content.is-active > .clbi-nations-tabpanel,
.clbi-fill-remaining.clbi-nations-panel-stack.is-era-previewing > .clbi-nations-era-content.is-active > .clbi-nations-history-panel {
will-change:auto !important;
}
/* =====================================================================
Nations continent switching — fast path refinement 20260708
---------------------------------------------------------------------
The first light-switch patch kept inactive continent bodies warm, but it
still used content-visibility:hidden. That saves idle paint work, yet it
also makes the browser re-open layout/paint for the next continent at the
exact click/shortcut frame. Since flags and rows are already cached, the
smoother strategy is to keep all continent bodies layout-warm and switch
only visibility/opacity/pointer-events. NationsPanel.js also pins this
body well to the tallest warm continent via --clbi-nations-continent-body-min-h.
===================================================================== */
.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body {
min-height:calc(var(--clbi-nations-continent-body-min-h, 0px) + 16px) !important;
}
.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent:not(.is-active),
.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent.is-active {
content-visibility:visible !important;
}
/* 20260708 deeper pass: do not force inactive continent bodies into their own GPU layers.
The globe is already WebGL; extra composited layers here can make the switch feel
heavier instead of smoother on the same GPU queue. */
.clbi-nations-tabpanel.is-continent-switching .clbi-nations-tabpanel-body {
contain:layout paint style !important;
}
.wiki-decoration[data-decoration-visible="0"] {
display:none !important;
}
/* =====================================================================
Foundation correction — Nations & Factions canonical UI
---------------------------------------------------------------------
기존 표준 클래스 병기는 유지한다. 시각 효과만 국가 및 조합의 안정 표본으로 되돌린다.
- 대륙 책갈피는 눌림 버튼이 아니며, 배경은 항상 #1d1d1d이다.
- 역사적 사건 연도 선택은 책갈피가 아니라 버튼이다.
- 국가 정보 패널의 내용 우물은 기존 국가 및 조합 비례를 공식 표본으로 유지한다.
- 패널 상단선은 존재하되, 책갈피가 닿는 구간에서는 책갈피가 위에서 덮어
#050505가 2px로 보이지 않게 한다.
===================================================================== */
.clbi-nations-history-panel > .clbi-nations-module-title {
height:auto !important;
min-height:34px !important;
max-height:none !important;
margin:0 !important;
padding:0 2px !important;
box-sizing:border-box !important;
font-weight:700 !important;
font-size:12px !important;
color:#ffffff !important;
border:0 !important;
background:transparent !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
box-shadow:none !important;
}
/* 대륙 책갈피 행은 패널 상단 #050505 1px과 같은 좌표를 공유하도록 1px 내려 겹친다. */
.clbi-nations-history-panel + .clbi-nations-tabpanel,
.clbi-nations-panel-stack > .clbi-nations-history-panel + .clbi-nations-tabpanel {
margin-top:23px !important;
}
.clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs {
top:-23px !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
z-index:5 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
height:24px !important;
min-height:24px !important;
max-height:24px !important;
line-height:1 !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;
font-size:11px !important;
font-weight:700 !important;
text-shadow:1px 1px 0 #000 !important;
transform:none !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:not(.is-active) {
color:#626262 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:hover,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:focus,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
background:#1d1d1d !important;
color:#ffffff !important;
outline:0 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
position:relative !important;
z-index:6 !important;
overflow:visible !important;
border-bottom-color:#1d1d1d !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
content:"" !important;
display:block !important;
position:absolute !important;
left:1px !important;
right:1px !important;
bottom:-2px !important;
height:3px !important;
background:#1d1d1d !important;
pointer-events:none !important;
z-index:7 !important;
}
.clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
position:relative !important;
z-index:1 !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-top: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;
}
/* 국가 정보 패널의 기존 우물 비례를 정식 표본으로 복구한다. */
.clbi-nations-tabpanel-region {
min-height:24px !important;
height:auto !important;
padding:0 6px !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
color:#ffffff !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.25 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}
.clbi-nations-tabpanel-well {
min-height:24px !important;
padding:3px 8px !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;
color:#e2e2e2 !important;
font-size:11px !important;
font-weight:400 !important;
line-height:1.5 !important;
text-align:center !important;
word-break:keep-all !important;
}
.clbi-nations-tabpanel-well a,
.clbi-nations-tabpanel-well a:visited {
color:#e2e2e2 !important;
text-decoration:none !important;
}
.clbi-nations-tabpanel-well a:hover,
.clbi-nations-tabpanel-well a:focus {
color:#ffffff !important;
text-decoration:none !important;
}
/* 역사적 사건 연도 선택은 책갈피가 아니라 버튼이다. */
.clbi-nations-history-year-button {
height:24px !important;
min-height:24px !important;
max-height:24px !important;
padding:0 6px !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;
color:#e2e2e2 !important;
cursor:pointer !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}
.clbi-nations-history-year-button:hover,
.clbi-nations-history-year-button:focus {
background:#1d1d1d !important;
border-color:#050505 !important;
color:#ffffff !important;
outline: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;
}
.clbi-nations-history-year-button.is-active,
.clbi-nations-history-year-button:active {
background:#101010 !important;
border-color:#050505 !important;
color:#e2e2e2 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
}
/* =====================================================================
Foundation pass fix3 — nations tab seams, 12px text restoration
- 대륙 책갈피/당대 존재 국가 플레이트의 좌우 마감은 border+side inset 2px을 보존한다.
- 선택 연결 덮개는 내부 면만 덮어서 패널 상단 #050505/#555555를 가린다.
- 국가 정보 패널의 텍스트는 12px 기준으로 복구한다.
===================================================================== */
.clbi-nations-history-panel + .clbi-nations-tabpanel,
.clbi-nations-panel-stack > .clbi-nations-history-panel + .clbi-nations-tabpanel {
margin-top:23px !important;
}
.clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs {
top:-23px !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
z-index:8 !important;
overflow:visible !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
position:relative !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
padding:0 8px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-radius:0 !important;
color:#626262 !important;
font-size:12px !important;
font-weight:700 !important;
line-height:24px !important;
text-shadow:1px 1px 0 #000 !important;
transform:none !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
z-index:9 !important;
overflow:visible !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:hover,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:focus,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
background:#1d1d1d !important;
color:#ffffff !important;
outline:0 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
border-bottom-color:#1d1d1d !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
z-index:10 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::before,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::before {
content:none !important;
display:none !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
content:"" !important;
display:block !important;
position:absolute !important;
left:2px !important;
right:2px !important;
bottom:-2px !important;
height:3px !important;
background:#1d1d1d !important;
pointer-events:none !important;
z-index:11 !important;
}
.clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
position:relative !important;
z-index:1 !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-top: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;
}
.clbi-nations-tabpanel-region {
min-height:24px !important;
height:auto !important;
padding:0 6px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
color:#ffffff !important;
font-size:12px !important;
font-weight:700 !important;
line-height:24px !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}
.clbi-nations-tabpanel-well {
min-height:24px !important;
padding:3px 8px !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;
color:#e2e2e2 !important;
font-size:12px !important;
font-weight:400 !important;
line-height:18px !important;
text-align:center !important;
word-break:keep-all !important;
}
.clbi-nations-tabpanel-well a,
.clbi-nations-tabpanel-well a:visited,
.clbi-nations-tabpanel .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-label {
color:#e2e2e2 !important;
font-size:12px !important;
font-weight:400 !important;
line-height:18px !important;
text-decoration:none !important;
}
.clbi-nations-tabpanel-well a:hover,
.clbi-nations-tabpanel-well a:focus,
.clbi-nations-tabpanel .clbi-nations-list-item:hover .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-item:focus-within .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-item.is-panel-hovered .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-item:hover .clbi-nations-list-label,
.clbi-nations-tabpanel .clbi-nations-list-item:focus-within .clbi-nations-list-label,
.clbi-nations-tabpanel .clbi-nations-list-item.is-panel-hovered .clbi-nations-list-label {
color:#ffffff !important;
text-decoration:none !important;
}
.clbi-nations-history-year-button {
height:24px !important;
min-height:24px !important;
max-height:24px !important;
font-size:12px !important;
font-weight:700 !important;
line-height:24px !important;
color:#e2e2e2 !important;
}
.clbi-nations-history-year-button:hover,
.clbi-nations-history-year-button:focus {
color:#ffffff !important;
}
.clbi-nations-history-year-button.is-active,
.clbi-nations-history-year-button:active {
color:#e2e2e2 !important;
}
/* Foundation pass fix: final nations visual corrections.
- Era side controls are tall map controls, not 24px one-line buttons.
- Continent bookmarks/title plate preserve side edge pixels; only the inner bottom connection covers the body top.
- Nation information panel typography returns to the 12px standard without changing the proven well proportions. */
.clbi-nations-era-side-button,
.clbi-nations-era-side-button.button {
height:100% !important;
min-height:0 !important;
max-height:none !important;
line-height:1 !important;
color:#e2e2e2 !important;
}
.clbi-nations-era-side-button:hover,
.clbi-nations-era-side-button:focus {
color:#ffffff !important;
}
.clbi-nations-era-side-button:active {
color:#e2e2e2 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
font-size:12px !important;
line-height:24px !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;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
border-bottom-color:#1d1d1d !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
left:2px !important;
right:2px !important;
bottom:-2px !important;
height:3px !important;
background:#1d1d1d !important;
}
.clbi-nations-tabpanel-region {
font-size:12px !important;
line-height:24px !important;
}
.clbi-nations-tabpanel-well {
font-size:12px !important;
line-height:18px !important;
padding:3px 8px !important;
min-height:24px !important;
}
.clbi-nations-tabpanel-well a,
.clbi-nations-tabpanel-well a:visited,
.clbi-nations-list-link,
.clbi-nations-list-label {
font-size:12px !important;
}
.clbi-nations-history-year-button {
font-size:12px !important;
line-height:24px !important;
}
/* =====================================================================
Nations tabpanel seam repair — structured joint piece
---------------------------------------------------------------------
The selected bookmark and the bookmark-shaped title plate touch the
country body. A single flat cover cannot satisfy both requirements:
it either eats the side strokes or leaves the body top stroke exposed.
This final block treats the contact area as a 3px joint piece:
- center covers the body top #050505 / #555555 with #1d1d1d;
- left and right rebuild the bookmark side strokes inside the joint.
===================================================================== */
.clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs {
position:absolute !important;
left:0 !important;
right:0 !important;
top:-24px !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
display:grid !important;
grid-template-columns:repeat(6, 175px) minmax(0, 1fr) !important;
column-gap:2px !important;
row-gap:0 !important;
overflow:visible !important;
z-index:30 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
position:relative !important;
top:auto !important;
bottom:auto !important;
left:auto !important;
right:auto !important;
transform:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
margin:0 !important;
padding:0 8px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-radius:0 !important;
color:#626262 !important;
font-size:12px !important;
font-weight:700 !important;
line-height:24px !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
white-space:nowrap !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
overflow:visible !important;
z-index:31 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:hover,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:focus,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
background:#1d1d1d !important;
color:#ffffff !important;
outline:0 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
border-bottom-color:#1d1d1d !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
z-index:40 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab::before,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::before {
content:none !important;
display:none !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
content:"" !important;
display:block !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:-2px !important;
height:3px !important;
pointer-events:none !important;
z-index:41 !important;
background:
linear-gradient(
to right,
#050505 0,
#050505 1px,
#101010 1px,
#101010 2px,
#1d1d1d 2px,
#1d1d1d calc(100% - 2px),
#555555 calc(100% - 2px),
#555555 calc(100% - 1px),
#050505 calc(100% - 1px),
#050505 100%
) !important;
}
.clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
position:relative !important;
z-index:1 !important;
margin-top:0 !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-top: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;
}
/* Era side controls are vertical globe-row controls, not one-line .button controls. */
.clbi-nations-map-row .clbi-nations-era-side-slot {
height:var(--clbi-nations-map-h) !important;
min-height:var(--clbi-nations-map-h) !important;
max-height:var(--clbi-nations-map-h) !important;
}
.clbi-nations-map-row .clbi-nations-era-side-button,
.clbi-nations-map-row .clbi-nations-era-side-button.button {
position:absolute !important;
top:0 !important;
bottom:auto !important;
width:var(--clbi-nations-side-button-w) !important;
height:var(--clbi-nations-map-h) !important;
min-height:var(--clbi-nations-map-h) !important;
max-height:var(--clbi-nations-map-h) !important;
line-height:1 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
/* =====================================================================
Foundation pass fix6 — bookmark/title plate seam flush connection
- Active continent bookmarks and the title plate connect to the body as one #1d1d1d face.
- The connector must not be inset horizontally; inset connectors made the joint step inward by 1px.
- The body still owns its #050505/#555555 top edge, but the connected tab/title plate covers it across its full visual width.
===================================================================== */
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
border-bottom-color:#1d1d1d !important;
overflow:visible !important;
z-index:20 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
content:"" !important;
display:block !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:-2px !important;
height:3px !important;
background:#1d1d1d !important;
pointer-events:none !important;
z-index:21 !important;
}
/* =====================================================================
Foundation pass fix7 — tab/body seam reset
---------------------------------------------------------------------
Final geometry for Nations continent bookmarks:
- The body owns its real top border and top inset.
- Every 24px bookmark row overlaps the body by exactly 1px, so inactive
bookmark bottom #050505 covers the body's top #050505 instead of doubling it.
- Active bookmark and the bookmark-title plate are not pressed buttons: their
bottom border/inset are removed, letting the #1d1d1d face cover the body top
border. A 1px connector outside the bookmark covers only the body top inset.
- The connector starts outside the bookmark box (top:100%), so it does not eat
the bookmark's own side strokes and cannot create the previous corner lumps.
===================================================================== */
.clbi-nations-tabpanel {
margin-top:27px !important;
}
.clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs {
top:-23px !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
overflow:visible !important;
z-index:50 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
position:relative !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
box-sizing:border-box !important;
overflow:visible !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;
z-index:51 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:not(.is-active)::after {
content:none !important;
display:none !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
background:#1d1d1d !important;
color:#ffffff !important;
border-bottom:0 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
z-index:60 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
content:"" !important;
display:block !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:100% !important;
bottom:auto !important;
width:auto !important;
height:1px !important;
background:#1d1d1d !important;
border:0 !important;
box-shadow:none !important;
pointer-events:none !important;
z-index:61 !important;
}
.clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
position:relative !important;
z-index:1 !important;
margin-top:0 !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-top: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;
}
/* =====================================================================
Foundation pass fix8 — bookmark seam endpoint repair
---------------------------------------------------------------------
Fix7 correctly removed the old 3px seam block, but active bookmarks and
the title plate used border-bottom:0. That made the side strokes end one
pixel before the joined panel face, so the visible corner endpoint looked
clipped. Keep the side geometry intact by preserving a real 1px bottom
border, but color that bottom border #1d1d1d so the bookmark/title face is
still visually joined to the panel. The external connector remains a
separate 1px strip whose only job is to cover the panel's top inset.
===================================================================== */
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
border:1px solid #050505 !important;
border-bottom-color:#1d1d1d !important;
background:#1d1d1d !important;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
z-index:60 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
content:"" !important;
display:block !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:100% !important;
bottom:auto !important;
width:auto !important;
height:1px !important;
background:#1d1d1d !important;
border:0 !important;
box-shadow:none !important;
pointer-events:none !important;
z-index:61 !important;
}
/* =====================================================================
Foundation pass fix9 — endpoint-only seam repair
---------------------------------------------------------------------
Fix8 reintroduced a full bottom border on active bookmarks/title plates.
That changed the seam instead of repairing the two clipped side endpoints.
This block restores the fix7 seam geometry and draws only the missing
endpoint pixels on the bottom row. The middle remains the element's
#1d1d1d face, so the active bookmark/title plate continues into the body.
===================================================================== */
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
border:1px solid #050505 !important;
border-bottom:0 !important;
background:#1d1d1d !important;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
z-index:60 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::before,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::before {
content:"" !important;
display:block !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
height:1px !important;
pointer-events:none !important;
z-index:62 !important;
background:
linear-gradient(
to right,
#050505 0 1px,
#101010 1px 2px,
transparent 2px calc(100% - 2px),
#555555 calc(100% - 2px) calc(100% - 1px),
#050505 calc(100% - 1px) 100%
) !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
content:"" !important;
display:block !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:100% !important;
bottom:auto !important;
width:auto !important;
height:1px !important;
background:#1d1d1d !important;
border:0 !important;
box-shadow:none !important;
pointer-events:none !important;
z-index:61 !important;
}
/* =====================================================================
Foundation pass fix10 — seam endpoint repair without inward notch
---------------------------------------------------------------------
Fix9 drew endpoint pixels on the bookmark's own bottom row, which made
the joined #1d1d1d face look inset by 1px. The joined face must remain
full-width. Keep the fix7 active geometry, place the #1d1d1d connector
outside the bookmark, and draw only the side endpoint pixels on that same
outside connector row.
===================================================================== */
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
border:1px solid #050505 !important;
border-bottom:0 !important;
background:#1d1d1d !important;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
z-index:60 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
content:"" !important;
display:block !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:100% !important;
bottom:auto !important;
width:auto !important;
height:1px !important;
background:#1d1d1d !important;
border:0 !important;
box-shadow:none !important;
pointer-events:none !important;
z-index:61 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::before,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::before {
content:"" !important;
display:block !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:100% !important;
bottom:auto !important;
width:auto !important;
height:1px !important;
pointer-events:none !important;
z-index:62 !important;
background:
linear-gradient(
to right,
#050505 0 1px,
#101010 1px 2px,
transparent 2px calc(100% - 2px),
#555555 calc(100% - 2px) calc(100% - 1px),
#050505 calc(100% - 1px) 100%
) !important;
}
/* =====================================================================
Foundation pass fix11 — flush seam connector width
---------------------------------------------------------------------
Fix10 placed the connector at left:0/right:0, but absolutely positioned
pseudo-elements are measured from the padding box. With a 1px side border,
that made the #1d1d1d connection appear inset by 1px. The connector must
extend to the border box while leaving the bookmark itself unchanged.
===================================================================== */
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
left:-1px !important;
right:-1px !important;
top:100% !important;
height:1px !important;
background:#1d1d1d !important;
border:0 !important;
box-shadow:none !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::before,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::before {
content:none !important;
display:none !important;
}
/* =====================================================================
Foundation pass fix12 — clipped full-width bookmark seam
---------------------------------------------------------------------
Fix11 expanded the seam connector with negative left/right offsets. That
fixed the inset seam but allowed the #1d1d1d connector to spill into the
adjacent bookmark gaps / outer edge. Keep the connector full-width by
extending it to the border box, but clip horizontal overflow at the bookmark
border box while allowing the 1px vertical connector to render below it.
This keeps the active bookmark and the bookmark-title plate visually joined
to the panel without drawing into neighboring tabs or adding inward pixels.
===================================================================== */
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
overflow:visible !important;
clip-path:inset(0 0 -1px 0) !important;
border:1px solid #050505 !important;
border-bottom:0 !important;
background:#1d1d1d !important;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::before,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::before {
content:none !important;
display:none !important;
}
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
content:"" !important;
display:block !important;
position:absolute !important;
left:-1px !important;
right:-1px !important;
top:100% !important;
bottom:auto !important;
width:auto !important;
height:1px !important;
background:#1d1d1d !important;
border:0 !important;
box-shadow:none !important;
pointer-events:none !important;
z-index:61 !important;
}