미디어위키:Template.css

@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 {
--clbi-nations-globe-frame:8px;
position:relative;
width:100%;
height:360px;
min-height:360px;
box-sizing:border-box;
overflow:hidden;
isolation:isolate;
background:#1d1d1d;
border:1px solid #050505;
border-radius:0;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
color:#e2e2e2;
font-size:11px;
line-height:1;
text-shadow:none;
}

.clbi-nations-globe-window::before {
content:"";
position:absolute;
inset:var(--clbi-nations-globe-frame);
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:var(--clbi-nations-globe-frame);
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:var(--clbi-nations-globe-frame);
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:var(--clbi-nations-globe-frame);
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-loading-screen {
position:absolute;
inset:var(--clbi-nations-globe-frame);
z-index:8;
box-sizing:border-box;
pointer-events:none;
overflow:hidden;
background:#050505;
}

.clbi-nations-globe-loading-gif,
.clbi-nations-globe-loading-freeze {
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
background:#050505;
image-rendering:crisp-edges;
image-rendering:pixelated;
-ms-interpolation-mode:nearest-neighbor;
}

.clbi-nations-globe-loading-freeze {
display:none;
}

.clbi-nations-globe-loading-screen::after {
content:"";
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
background:
radial-gradient(ellipse at 50% 48%, transparent 0%, transparent 38%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.64) 100%),
repeating-linear-gradient(to bottom, rgba(255,255,255,0.065) 0px, rgba(255,255,255,0.065) 1px, transparent 2px, transparent 5px);
mix-blend-mode:screen;
opacity:.16;
}

.clbi-nations-globe-topbar {
left:1px;
right:1px;
top:1px;
height:7px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:0 7px;
background:transparent;
border:0;
box-shadow:none;
}

.clbi-nations-globe-title {
min-width:0;
color:#e2e2e2;
font-size:9px;
font-weight:700;
line-height:7px;
letter-spacing:.35px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.clbi-nations-globe-status {
flex:0 0 auto;
color:#626262;
font-size:8px;
font-weight:700;
line-height:7px;
letter-spacing:.45px;
white-space:nowrap;
}

.clbi-nations-globe-bottombar {
left:1px;
right:1px;
bottom:1px;
height:7px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:0 7px;
background:transparent;
border:0;
box-shadow:none;
}

.clbi-nations-globe-readout,
.clbi-nations-globe-controls {
min-width:0;
color:#8a8a8a;
font-size:8px;
font-weight:700;
line-height:7px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.clbi-nations-globe-controls {
position:absolute;
right:7px;
bottom:10px;
flex:0 0 auto;
display:flex;
align-items:center;
gap:4px;
pointer-events:auto;
overflow:visible;
}

.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:132px;
max-width:calc(100% - 32px);
padding:7px 10px;
background:rgba(8,8,8,0.88);
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:12px;
font-weight:700;
line-height:18px;
text-align:center;
white-space:nowrap;
text-shadow:1px 1px 0 #000;
}

.clbi-nations-globe-loading-text {
display:inline-block;
min-width:58px;
}

.clbi-nations-globe-window.is-connected .clbi-nations-globe-loading {
color:#95c884;
}

.clbi-nations-globe-window.is-no-signal .clbi-nations-globe-loading {
color:#d46262;
}

.clbi-nations-globe-error {
display:none;
color:#d46262;
}

.clbi-nations-globe-window.is-ready .clbi-nations-globe-loading,
.clbi-nations-globe-window.is-ready .clbi-nations-globe-loading-screen,
.clbi-nations-globe-window.is-ready .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:497px;
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:337px;
}

.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 / Historical event overflow slide
 * Source base: clbiwiki-source-2026-07-09T21-26-03-513Z.
 * Pulls only the overflowing-text slide behavior from 불안정.zip.
 * The item geometry, frame finish, row height, bookmark/tab styling, and panel seams stay on the source base.
 */
.clbi-nations-history-period.is-history-scroll-viewport,
.clbi-nations-history-event-name.is-history-scroll-viewport {
position:relative !important;
display:block !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:clip !important;
}

.clbi-nations-history-period.is-history-scrolling,
.clbi-nations-history-event-name.is-history-scrolling {
mask-image:linear-gradient(to right, black 86%, transparent 100%) !important;
-webkit-mask-image:linear-gradient(to right, black 86%, transparent 100%) !important;
}

.clbi-nations-history-scroll-text {
display:inline-block !important;
width:max-content !important;
max-width:none !important;
min-width:0 !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
vertical-align:top !important;
color:inherit !important;
font:inherit !important;
font-size:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
letter-spacing:inherit !important;
text-shadow:inherit !important;
}

.clbi-nations-history-scroll-text > a,
a.clbi-nations-history-scroll-text {
display:inline-block !important;
width:max-content !important;
max-width:none !important;
min-width:0 !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
color:inherit !important;
font:inherit !important;
font-size:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
letter-spacing:inherit !important;
text-decoration:none !important;
text-shadow:inherit !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-loading-screen,
.clbi-nations-globe-window.is-ready .clbi-nations-globe-error {
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 pass fix13 — clean Nations bookmark seam reset
   ---------------------------------------------------------------------
   Previous foundation/fix blocks are not stacked here.  This block is the
   single final override for the Nations continent bookmark row.

   Geometry:
   - The tab row is lowered by 1px over the panel body so inactive bookmarks'
     bottom #050505 replaces the panel top #050505 instead of producing a
     doubled line.
   - Active bookmarks and the bookmark-title plate keep their side borders,
     use #1d1d1d for the bottom edge, and draw one outside #1d1d1d row with
     box-shadow.  That covers the panel top inset without pseudo-elements,
     negative offsets, inward pixels, or spill into adjacent gaps.
   ===================================================================== */

.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-size:12px !important;
font-weight:700 !important;
color:#ffffff !important;
border:0 !important;
background:transparent !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:4px !important;
line-height:34px !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
box-shadow:none !important;
}

.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:50 !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;
box-sizing:border-box !important;
overflow:visible !important;
clip-path:none !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:51 !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 {
content:none !important;
display:none !important;
}

.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:hover,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:focus {
background:#1d1d1d !important;
color:#ffffff !important;
outline:0 !important;
}

.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:not(.is-active) {
color:#626262 !important;
}

.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
background:#1d1d1d !important;
color:#ffffff !important;
border:1px solid #050505 !important;
border-bottom-color:#1d1d1d !important;
z-index:60 !important;
box-shadow:
  inset 0 1px 0 #555555,
  inset -1px 0 0 #555555,
  inset 1px 0 0 #101010,
  0 1px 0 #1d1d1d !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;
}

.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: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 {
color:#e2e2e2 !important;
text-decoration:none !important;
}

.clbi-nations-tabpanel-well a:hover,
.clbi-nations-tabpanel-well a:focus {
color:#ffffff !important;
text-decoration:underline !important;
}

/* History year selectors are buttons, not bookmarks. */
.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:24px !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 fix16 — Nations bookmark seam: final open-tab geometry
   ---------------------------------------------------------------------
   Final visual model:
   - The tab row overlaps the country panel by exactly 1px.
   - Inactive bookmarks remain closed: their bottom #050505 edge covers the
     panel's top #050505 edge, so they read as separated pieces.
   - The active bookmark and the bookmark-shaped title plate are open at the
     bottom: no bottom border and no bottom inset. Their #1d1d1d face covers
     only the panel's top #050505 edge.
   - The panel's top #555555 inset remains visible below that edge.
   - No connector pseudo-elements, negative side offsets, clipping hacks, or
     side-pixel repainting are used. Side strokes come only from the element's
     own left/right border and inset.
   ===================================================================== */

.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;
  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;
  clip-path:none !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:51 !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-tab:hover,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:focus {
  background:#1d1d1d !important;
  color:#ffffff !important;
  outline:0 !important;
}

.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:not(.is-active) {
  color:#626262 !important;
}

.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  background:#1d1d1d !important;
  color:#ffffff !important;
  border-top:1px solid #050505 !important;
  border-right:1px solid #050505 !important;
  border-bottom:0 !important;
  border-left:1px solid #050505 !important;
  z-index:60 !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:hover,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active:focus,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  background:#1d1d1d !important;
  color:#ffffff !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;
}


/* =====================================================================
   Foundation pass fix20 — Nations bookmark seam final correction
   ---------------------------------------------------------------------
   의도:
   - body에 그린 hard-coded seam overlay를 쓰지 않는다.
   - active continent bookmark와 bookmark-shaped title plate 자신에게만
     border-box 기준 1px #1d1d1d seam을 둔다.
   - ::before/::after, left/right 음수값, 내부 1px 보정, :has 좌표계는 사용하지 않는다.
   - closed bookmark는 그대로 닫힌 하단 edge를 가진다.
   ===================================================================== */

.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-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  background:#1d1d1d !important;
  color:#ffffff !important;
  border-top:1px solid #050505 !important;
  border-right:1px solid #050505 !important;
  border-bottom:0 !important;
  border-left:1px solid #050505 !important;
  box-shadow:
    inset 0 1px 0 #555555,
    inset -1px 0 0 #555555,
    inset 1px 0 0 #101010 !important;
  z-index:60 !important;
}

/* =====================================================================
   Foundation pass fix22 — Nations active/title seam side-stroke row
   ---------------------------------------------------------------------
   The seam is a single 1px row below an open bookmark. It must repaint the
   row exactly as the bookmark bottom cross-section should look:
   left edge #050505, left inset #101010, center #1d1d1d, right inset #555555,
   right edge #050505. This prevents the panel body's top #555555 inset from
   protruding into the bookmark side strokes while keeping the center joined.
   ===================================================================== */

.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:-1px !important;
  height:1px !important;
  pointer-events:none !important;
  z-index:70 !important;
  background:linear-gradient(to right,
    #050505 0 1px,
    #101010 1px 2px,
    #1d1d1d 2px calc(100% - 2px),
    #555555 calc(100% - 2px) calc(100% - 1px),
    #050505 calc(100% - 1px) 100%
  ) !important;
}

/* =====================================================================
   Foundation pass fix23 — Nations bookmark as raised panel protrusion
   ---------------------------------------------------------------------
   최종 단면 기준:
   - 활성 대륙 책갈피와 '당대 존재 국가'는 #1d1d1d 패널에서 튀어나온 열린 부분이다.
   - 비활성 책갈피는 하단이 닫힌 독립 책갈피다.
   - row는 panel body 위로 정확히 2px 겹친다. 이 2px은 body의 top #050505와
     top inset #555555 영역이며, 열린 책갈피는 자기 #1d1d1d 면으로 이를 덮는다.
   - 별도 seam, pseudo pixel, 음수 좌표, gradient 덧칠을 쓰지 않는다.
   - 좌우 마감은 각 책갈피 자신의 #050505 border와 #101010/#555555 inset으로만 형성한다.
   ===================================================================== */

.clbi-nations-history-panel + .clbi-nations-tabpanel,
.clbi-nations-panel-stack > .clbi-nations-history-panel + .clbi-nations-tabpanel {
  margin-top:22px !important;
}

.clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs {
  top:-22px !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;
  clip-path:none !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:51 !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-tab:hover,
.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:focus {
  background:#1d1d1d !important;
  color:#ffffff !important;
  outline:0 !important;
}

.clbi-nations-tabpanel .clbi-nations-tabpanel-tab:not(.is-active) {
  color:#626262 !important;
}

.clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  background:#1d1d1d !important;
  color:#ffffff !important;
  border-top:1px solid #050505 !important;
  border-right:1px solid #050505 !important;
  border-bottom:0 !important;
  border-left:1px solid #050505 !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-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;
}

/* =========================================================
   Nations tabpanel — physical open-tab final seam (20260709-fix24)
   ---------------------------------------------------------
   활성 책갈피와 "당대 존재 국가"는 패널 위에 따로 얹은 덮개가 아니라
   #1d1d1d 패널에서 위로 솟은 열린 돌출부다.
   비활성 책갈피는 하단이 닫힌 독립 항목이고,
   활성/제목 플레이트는 하단이 열린 항목이다.

   이 블록은 이전 fix 계열의 connector/gradient/좌표 보정 규칙을
   하나의 물리 단면으로 덮어 최종 시각 픽셀을 고정한다.
   ========================================================= */
body:has(.clbi-nations-panel-stack) .clbi-nations-history-panel + .clbi-nations-tabpanel,
body:has(.clbi-nations-panel-stack) .clbi-nations-panel-stack > .clbi-nations-history-panel + .clbi-nations-tabpanel {
  margin-top:24px !important;
}

body:has(.clbi-nations-panel-stack) .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;
  align-items:stretch !important;
  justify-items:stretch !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  z-index:50 !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  position:relative !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;
  box-sizing:border-box !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 8px !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;
  transform:none !important;
  clip-path: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:51 !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab::before,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title::before {
  content:none !important;
  display:none !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab::after,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
  content:none !important;
  display:none !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab:hover,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab:focus {
  background:#1d1d1d !important;
  color:#ffffff !important;
  outline:0 !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab:not(.is-active) {
  color:#626262 !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  background:#1d1d1d !important;
  color:#ffffff !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:60 !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
body:has(.clbi-nations-panel-stack) .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;
  height:2px !important;
  pointer-events:none !important;
  z-index:61 !important;
  background:linear-gradient(
    to right,
    #050505 0 1px,
    #101010 1px 2px,
    #1d1d1d 2px calc(100% - 2px),
    #555555 calc(100% - 2px) calc(100% - 1px),
    #050505 calc(100% - 1px) 100%
  ) !important;
}

body:has(.clbi-nations-panel-stack) .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-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;
}

/* =========================================================
   Nations tabpanel — open protrusion geometry correction (20260709-fix25)
   ---------------------------------------------------------
   Final visual target:
   - Inactive bookmarks are closed 24px tabs.
   - Active bookmark and the bookmark-shaped title plate are the same #1d1d1d
     panel protruding upward from the country panel.
   - Their body extends 2px into the panel top area, covering the panel's
     #050505 top edge and #555555 top inset only under the active/title blocks.
   - No connector pseudo-elements, negative side paint, gradients, or manual
     seam pixels are used. Side finishes are the tab's own left/right border
     and inset, so they cannot leak into adjacent gaps.
   ========================================================= */
body:has(.clbi-nations-panel-stack) .clbi-nations-history-panel + .clbi-nations-tabpanel,
body:has(.clbi-nations-panel-stack) .clbi-nations-panel-stack > .clbi-nations-history-panel + .clbi-nations-tabpanel {
  margin-top:23px !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs {
  top:-23px !important;
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  overflow:visible !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  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;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab::before,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab::after,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title::before,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title::after,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::before,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::after {
  content:none !important;
  display:none !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  height:25px !important;
  min-height:25px !important;
  max-height:25px !important;
  background:#1d1d1d !important;
  color:#ffffff !important;
  border-top:1px solid #050505 !important;
  border-right:1px solid #050505 !important;
  border-bottom:0 !important;
  border-left:1px solid #050505 !important;
  box-shadow:
    inset 0 1px 0 #555555,
    inset -1px 0 0 #555555,
    inset 1px 0 0 #101010 !important;
  z-index:70 !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
  margin-top:0 !important;
  position:relative !important;
  z-index:1 !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;
}

/* =========================================================
   Nations tabpanel — visual seam correction (20260709-fix26)
   ---------------------------------------------------------
   Final visual model:
   - The tab row overlaps the country panel by exactly 1px.
     This lets every tab's own bottom #050505 occupy the same visual row as
     the panel top #050505, so two black border lines cannot sit side-by-side.
   - Active bookmark and the bookmark-shaped title plate are open protrusions.
     They have no closed bottom stroke or bottom shadow.
   - The remaining panel top highlight (#555555) is hidden only inside the
     active/title segment by a body-level 1px #1d1d1d strip. The strip belongs
     to the panel layer, not the tab layer, so it does not eat the tab side
     strokes and cannot protrude outside the tab border.
   ========================================================= */
body:has(.clbi-nations-panel-stack) .clbi-nations-history-panel + .clbi-nations-tabpanel,
body:has(.clbi-nations-panel-stack) .clbi-nations-panel-stack > .clbi-nations-history-panel + .clbi-nations-tabpanel {
  margin-top:23px !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel > .clbi-nations-tabpanel-tabs {
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:-23px !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;
  align-items:stretch !important;
  justify-items:stretch !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  z-index:50 !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  position:relative !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;
  box-sizing:border-box !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 8px !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;
  transform:none !important;
  clip-path: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:51 !important;
}

/* All tab-level seam painters are disabled. The seam is handled by the panel. */
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab::before,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab::after,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title::before,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
  content:none !important;
  display:none !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab:hover,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab:focus {
  background:#1d1d1d !important;
  color:#ffffff !important;
  outline:0 !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab:not(.is-active) {
  color:#626262 !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  background:#1d1d1d !important;
  color:#ffffff !important;
  border-top:1px solid #050505 !important;
  border-right:1px solid #050505 !important;
  border-bottom:0 !important;
  border-left:1px solid #050505 !important;
  box-shadow:
    inset 0 1px 0 #555555,
    inset -1px 0 0 #555555,
    inset 1px 0 0 #101010 !important;
  z-index:70 !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
  position:relative !important;
  z-index:1 !important;
  margin-top:0 !important;
  overflow:visible !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;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::before,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::after {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:0 !important;
  height:1px !important;
  background:#1d1d1d !important;
  pointer-events:none !important;
  z-index:10 !important;
}

/* Active continent seam mask. Uses the fixed country-tab grid: 175px tab + 2px gap. */
body:has(.clbi-nations-tabpanel-tab[data-continent="america"].is-active) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::before {
  left:0 !important;
  width:175px !important;
}
body:has(.clbi-nations-tabpanel-tab[data-continent="europe"].is-active) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::before {
  left:177px !important;
  width:175px !important;
}
body:has(.clbi-nations-tabpanel-tab[data-continent="africa"].is-active) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::before {
  left:354px !important;
  width:175px !important;
}
body:has(.clbi-nations-tabpanel-tab[data-continent="asia"].is-active) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::before {
  left:531px !important;
  width:175px !important;
}
body:has(.clbi-nations-tabpanel-tab[data-continent="oceania"].is-active) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::before {
  left:708px !important;
  width:175px !important;
}
body:has(.clbi-nations-tabpanel-tab[data-continent="antarctica"].is-active) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::before {
  left:885px !important;
  width:175px !important;
}

/* Bookmark-shaped title plate seam mask. */
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::after {
  left:1062px !important;
  right:0 !important;
}

/* =========================================================
   Nations tabpanel — open-panel protrusion correction (20260709-fix27)
   ---------------------------------------------------------
   Final visual rule from the panel manual:
   - An active bookmark and the bookmark-shaped title plate are protrusions of
     the same #1d1d1d panel body.
   - Their bottom face is open: no bottom #050505 edge and no bottom #101010 inset.
   - The original side edges remain part of the tab only; #050505 is not extended.
   - Only the inner #101010 side shadow is extended 2px downward to cover the
     country panel joint. The rest of that 2px joint is #1d1d1d.
   - No body-level seam masks, hard-coded tab x positions, negative side offsets,
     or gradient seam painters are used.
   ========================================================= */
body:has(.clbi-nations-panel-stack) .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;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  position:relative !important;
  height:24px !important;
  min-height:24px !important;
  max-height:24px !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;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  background:#1d1d1d !important;
  color:#ffffff !important;
  border-top:1px solid #050505 !important;
  border-right:1px solid #050505 !important;
  border-bottom:0 !important;
  border-left:1px solid #050505 !important;
  box-shadow:
    inset 0 1px 0 #555555,
    inset -1px 0 0 #555555,
    inset 1px 0 0 #101010 !important;
  z-index:70 !important;
}

/* Disable all previous tab/body seam painters. */
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::before,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel > .clbi-nations-tabpanel-body::after,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab::before,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title::before {
  content:none !important;
  display:none !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab::after,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title::after {
  content:none !important;
  display:none !important;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::after,
body:has(.clbi-nations-panel-stack) .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;
  height:2px !important;
  pointer-events:none !important;
  z-index:71 !important;
  background:#1d1d1d !important;
}

/* =========================================================
   Nations tabpanel — active/title left inner seam pixel fix (20260709-fix30)
   ---------------------------------------------------------
   Visual-only micro-fix for the final remaining artifact:
   the country panel top highlight (#555555) leaked into the active bookmark's
   left inner shadow column by exactly one pixel. The pseudo-element is positioned
   from the padding edge, so left:0 targets the inner shadow column; left:1 painted
   the pixel to its right.
   ========================================================= */
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab.is-active::before,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:100% !important;
  width:1px !important;
  height:1px !important;
  background:#101010 !important;
  pointer-events:none !important;
  z-index:72 !important;
}

/* =========================================================
   Nations — one-line wells use a 22px border-box with a 20px #080808 face (20260709-fix35)
   ---------------------------------------------------------
   Corrected interpretation:
   - Do not thicken #101010 / #555555 to 2px.
   - Reduce the well itself so the visible #080808 face becomes 20px.
   - A one-line well is 1px top edge + 20px face + 1px bottom edge = 22px.
   - Existing 24px raised controls keep their own 1px #050505 outer edge and 1px inset.

   Legacy class names stay because this is the existing Nations component.
   New shared systems should use the unprefixed standard classes defined in
   Theme.css unless compatibility requires otherwise.
   ========================================================= */
.clbi-nations-tabpanel-row {
  align-items:center !important;
}

.clbi-nations-tabpanel-well {
  align-self:center !important;
  min-height:22px !important;
  height:auto !important;
  padding:1px 8px !important;
  box-sizing:border-box !important;
  background:
    linear-gradient(#101010,#101010) 0 0 / 100% 1px no-repeat,
    linear-gradient(#101010,#101010) 100% 0 / 1px 100% no-repeat,
    linear-gradient(#555555,#555555) 0 0 / 1px 100% no-repeat,
    linear-gradient(#555555,#555555) 0 100% / 100% 1px no-repeat,
    #080808 !important;
  border:0 !important;
  box-shadow:none !important;
  color:#e2e2e2 !important;
  font-size:0 !important;
  font-weight:400 !important;
  line-height:0 !important;
  text-align:center !important;
}

.clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
.clbi-nations-tabpanel .clbi-nations-tabpanel-title,
.clbi-nations-history-year-button {
  font-size:12px !important;
  line-height:20px !important;
}

.clbi-nations-tabpanel-well a,
.clbi-nations-tabpanel-well a:visited,
.clbi-nations-tabpanel-well .clbi-nations-list-item,
.clbi-nations-tabpanel-well .clbi-nations-list-link,
.clbi-nations-tabpanel-well .clbi-nations-list-label,
.clbi-nations-tabpanel-well .clbi-nations-list-divider,
.clbi-nations-tabpanel-well .clbi-nations-era-wip-message,
.clbi-nations-tabpanel-well .clbi-nations-era-wip-message-ko,
.clbi-nations-tabpanel-well .clbi-nations-era-wip-message-en {
  font-size:12px !important;
  font-weight:400 !important;
  line-height:20px !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-item,
.clbi-nations-tabpanel-well .clbi-nations-list-link,
.clbi-nations-tabpanel-well .clbi-nations-list-label,
.clbi-nations-tabpanel-well .clbi-nations-list-divider {
  display:inline-flex !important;
  align-items:center !important;
  min-height:20px !important;
  vertical-align:middle !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-flag-slot {
  height:20px !important;
  align-items:center !important;
  vertical-align:middle !important;
}

.clbi-nations-tabpanel-well .clbi-nations-era-wip-message {
  text-shadow:none !important;
}


/* =========================================================
   Nations typography sharpness pass (20260709-fix36)
   ---------------------------------------------------------
   Root cause checked here:
   - The 12px Galmuri face itself is fine.
   - Some text was still going through legacy pixel-hostile paths: 1px text
     shadow on 12px UI text, inline-flex text boxes, and translateY(0px) on
     flag slots sharing the same line box.
   - The continent bookmarks are 175px wide. With symmetric 8px padding, a
     12px pixel-font label can be centered on a half-pixel. The left padding is
     increased by 1px only for those bookmark cells so the text start lands on
     the integer pixel grid while the accepted bookmark seam geometry stays
     unchanged.

   Visual standard: final pixels win over declared CSS arithmetic.  Legacy
   clbi-* names remain only because this is the existing Nations component.
   ========================================================= */
.clbi-nations-panel-stack,
.clbi-nations-panel-stack * {
  font-synthesis:none !important;
  font-kerning:none !important;
  font-optical-sizing:none !important;
  text-rendering:optimizeSpeed !important;
  -webkit-font-smoothing:none;
}

body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-tab,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel .clbi-nations-tabpanel-title {
  padding:0 8px 0 9px !important;
  text-shadow:none !important;
}

.clbi-nations-section-title,
.clbi-nations-module-title,
.clbi-nations-history-panel > .clbi-nations-module-title,
.clbi-nations-tabpanel-region,
.clbi-nations-history-year-button,
.clbi-nations-era-side-button,
.clbi-nations-globe-btn {
  text-shadow:none !important;
}

.clbi-nations-tabpanel-well,
.clbi-nations-tabpanel-well a,
.clbi-nations-tabpanel-well a:visited,
.clbi-nations-tabpanel-well .clbi-nations-list-item,
.clbi-nations-tabpanel-well .clbi-nations-list-link,
.clbi-nations-tabpanel-well .clbi-nations-list-label,
.clbi-nations-tabpanel-well .clbi-nations-list-divider,
.clbi-nations-tabpanel-well .clbi-nations-era-wip-message,
.clbi-nations-tabpanel-well .clbi-nations-era-wip-message-ko,
.clbi-nations-tabpanel-well .clbi-nations-era-wip-message-en {
  text-shadow:none !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-item {
  display:inline-flex !important;
  align-items:center !important;
  min-height:20px !important;
  line-height:20px !important;
  vertical-align:top !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-link,
.clbi-nations-tabpanel-well .clbi-nations-list-label,
.clbi-nations-tabpanel-well .clbi-nations-list-divider,
.clbi-nations-tabpanel-well a,
.clbi-nations-tabpanel-well a:visited {
  display:inline-block !important;
  height:20px !important;
  min-height:20px !important;
  line-height:20px !important;
  vertical-align:top !important;
}

.clbi-nations-list-flag-slot,
.clbi-nations-tabpanel-well .clbi-nations-list-flag-slot {
  transform:none !important;
  top:var(--flag-y, 0px) !important;
}

/* =========================================================
   Nations typography phase lock, centered version (20260709-fix38)
   ---------------------------------------------------------
   fix37 correctly removed the auto-width flag-slot phase drift, but it also
   changed the nation list to left alignment. The visual standard for the
   Nations tab well remains centered.

   Keep the accepted 22px well height and bookmark seams unchanged. Keep the
   integer 18px flag slot so text after each flag starts from a deterministic
   phase inside each item, but restore centered line layout for the whole list.

   Legacy clbi-* names remain only because this is the existing Nations
   component. New shared systems should use unprefixed standard classes.
   ========================================================= */
.clbi-nations-tabpanel-well {
  text-align:center !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-item {
  height:20px !important;
  min-height:20px !important;
  align-items:center !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-flag-slot {
  flex:0 0 18px !important;
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  height:20px !important;
  margin-right:3px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  line-height:0 !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-flag-slot .clbi-nations-list-flag {
  max-width:16px !important;
  max-height:16px !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-link,
.clbi-nations-tabpanel-well .clbi-nations-list-label,
.clbi-nations-tabpanel-well .clbi-nations-list-divider,
.clbi-nations-tabpanel-well a,
.clbi-nations-tabpanel-well a:visited {
  font-synthesis:none !important;
  font-kerning:none !important;
  font-optical-sizing:none !important;
  text-rendering:optimizeSpeed !important;
  text-shadow:none !important;
  transform:none !important;
  translate:none !important;
}

/* =========================================================
   Nations centered text phase lock (20260709-fix39)
   ---------------------------------------------------------
   Keep the nation list visually centered, but remove the per-line subpixel
   texture drift that returns when text-align:center centers lines with
   different odd/even widths.

   The fix is not left alignment.  Instead, every inline building block in the
   centered line is given an even-width footprint:
   - flag slot 18px + gap 4px = 22px
   - divider box 4px + left/right gap 4px = 12px

   With item/divider footprints locked to even pixels, each centered wrapped
   line keeps the same x-phase while the whole well remains centered.
   Legacy clbi-* names remain only for the existing Nations component.
   ========================================================= */
.clbi-nations-tabpanel-well {
  text-align:center !important;
  word-spacing:0 !important;
  letter-spacing:0 !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-item {
  display:inline-flex !important;
  align-items:center !important;
  height:20px !important;
  min-height:20px !important;
  vertical-align:top !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-flag-slot {
  flex:0 0 18px !important;
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  height:20px !important;
  margin-right:4px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  line-height:0 !important;
  transform:none !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-divider {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:4px !important;
  min-width:4px !important;
  max-width:4px !important;
  height:20px !important;
  margin:0 4px !important;
  padding:0 !important;
  line-height:20px !important;
  text-align:center !important;
  vertical-align:top !important;
}

.clbi-nations-tabpanel-well .clbi-nations-list-link,
.clbi-nations-tabpanel-well .clbi-nations-list-label,
.clbi-nations-tabpanel-well a,
.clbi-nations-tabpanel-well a:visited {
  display:inline-block !important;
  height:20px !important;
  min-height:20px !important;
  line-height:20px !important;
  vertical-align:top !important;
  white-space:nowrap !important;
}


/* =========================================================
   Nations list row snap centering (20260709-fix40)
   ---------------------------------------------------------
   Centered multiline nation lists cannot rely on CSS text-align alone: every
   wrapped line has a different measured width, and mathematical centering can
   place one line on an integer x phase while the next lands on a half-pixel
   phase.  NationsPanel.js now splits the list into measured visual rows and
   assigns each row an integer pixel padding-left.

   Keep the accepted 22px one-line well, 20px #080808 usable face, and bookmark
   seams unchanged.  The well is still visually centered; only the centering
   arithmetic is snapped to the pixel grid.
   ========================================================= */
.clbi-nations-tabpanel-well.is-row-snapped {
  text-align:left !important;
}

.clbi-nations-tabpanel-well .nations-list-lines {
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  font-size:0 !important;
  line-height:0 !important;
  text-align:left !important;
  white-space:normal !important;
}

.clbi-nations-tabpanel-well .nations-list-line {
  display:block !important;
  width:100% !important;
  height:20px !important;
  min-height:20px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  line-height:0 !important;
  text-align:left !important;
  white-space:nowrap !important;
}

.clbi-nations-tabpanel-well .nations-list-line-inner {
  display:inline-flex !important;
  align-items:center !important;
  height:20px !important;
  min-height:20px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  line-height:20px !important;
  white-space:nowrap !important;
  vertical-align:top !important;
  transform:none !important;
  translate:none !important;
}

.clbi-nations-tabpanel-well.is-row-snapped .clbi-nations-list-item,
.clbi-nations-tabpanel-well.is-row-snapped .clbi-nations-list-divider,
.clbi-nations-tabpanel-well.is-row-snapped .clbi-nations-list-link,
.clbi-nations-tabpanel-well.is-row-snapped .clbi-nations-list-label,
.clbi-nations-tabpanel-well.is-row-snapped a,
.clbi-nations-tabpanel-well.is-row-snapped a:visited {
  transform:none !important;
  translate:none !important;
  text-shadow:none !important;
}

/* =========================================================
   Nations globe unified frame — inner well gap pass (20260710)
   ---------------------------------------------------------
   The globe window frame now follows the same visual stack as the
   Nations module/history bodies: a #1d1d1d raised frame, then a
   #080808 recessed well, then the actual content surface.

   Geometry is kept integer-pixel based:
   - frame face: 8px from the outer border-box edge
   - recessed well gap: 2px between frame and globe content
   - content layers: frame + gap = 10px inset
   ========================================================= */
.clbi-nations-globe-window {
  --clbi-nations-globe-frame:8px !important;
  --clbi-nations-globe-gap:2px !important;
  --clbi-nations-globe-screen-inset:calc(var(--clbi-nations-globe-frame) + var(--clbi-nations-globe-gap)) !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-globe-window::before {
  inset:var(--clbi-nations-globe-frame) !important;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(130,170,210,0.10) 0%, rgba(80,110,145,0.030) 23%, transparent 48%) center / calc(100% - 4px) calc(100% - 4px) no-repeat,
    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%) center / calc(100% - 4px) calc(100% - 4px) no-repeat,
    linear-gradient(to bottom, #05070a 0%, #020305 58%, #000000 100%) center / calc(100% - 4px) calc(100% - 4px) no-repeat,
    #080808 !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-window::after,
.clbi-nations-globe-stage,
.clbi-nations-globe-vignette,
.clbi-nations-globe-loading-screen {
  inset:var(--clbi-nations-globe-screen-inset) !important;
}

.clbi-nations-globe-controls {
  right:var(--clbi-nations-globe-screen-inset) !important;
  bottom:var(--clbi-nations-globe-screen-inset) !important;
}


/* =========================================================
   Nations globe bottom panels — top text removal pass (20260710)
   ---------------------------------------------------------
   The globe top label/status text is removed from the visible frame.
   The remaining lower readout and controls are carried into two 24px
   #1d1d1d panels placed inside the recessed #080808 well.
   ========================================================= */
.clbi-nations-globe-topbar,
.clbi-nations-globe-title,
.clbi-nations-globe-status {
  display:none !important;
}

.clbi-nations-globe-bottombar {
  left:var(--clbi-nations-globe-screen-inset) !important;
  right:var(--clbi-nations-globe-screen-inset) !important;
  bottom:var(--clbi-nations-globe-screen-inset) !important;
  height:24px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

.clbi-nations-globe-readout,
.clbi-nations-globe-controls {
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  box-sizing:border-box !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;
  color:#e2e2e2 !important;
}

.clbi-nations-globe-readout {
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:calc(50% - 4px) !important;
  padding:0 8px !important;
  font-size:9px !important;
  font-weight:700 !important;
  line-height:24px !important;
  letter-spacing:.35px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  pointer-events:none !important;
}

.clbi-nations-globe-controls {
  position:static !important;
  right:auto !important;
  bottom:auto !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  padding:2px !important;
  overflow:visible !important;
  pointer-events:auto !important;
}

.clbi-nations-globe-btn {
  height:18px !important;
  min-height:18px !important;
  max-height:18px !important;
  min-width:42px !important;
  padding:0 5px !important;
  line-height:18px !important;
}