미디어위키: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 {
position:relative;
width:100%;
height:360px;
min-height:360px;
box-sizing:border-box;
overflow:hidden;
isolation:isolate;
background:#030303;
border:1px solid #050505;
border-radius:0;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #101010;
color:#e2e2e2;
font-size:11px;
line-height:1;
text-shadow:1px 1px 0 #000;
}

.clbi-nations-globe-window::before {
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
/* Static CSS star dots were removed here. Dynamic stars and planets are
   still drawn by NationsGlobe.js; this pseudo layer now only keeps the
   window glow/vignette/background. */
background:
radial-gradient(ellipse at 50% 48%, rgba(130,170,210,0.10) 0%, rgba(80,110,145,0.030) 23%, transparent 48%),
radial-gradient(ellipse at 50% 50%, rgba(8,14,22,0.10) 0%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0.90) 100%),
linear-gradient(to bottom, #05070a 0%, #020305 58%, #000000 100%);
}

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

.clbi-nations-globe-stage {
position:absolute;
inset:0;
z-index:2;
background:transparent;
overflow:hidden;
cursor:grab;
touch-action:none;
}

.clbi-nations-globe-stage:active,
.clbi-nations-globe-window.is-dragging .clbi-nations-globe-stage {
cursor:grabbing;
}

.clbi-nations-globe-stage canvas {
display:block;
width:100% !important;
height:100% !important;
outline:0;
}

.clbi-nations-globe-vignette {
position:absolute;
inset:0;
z-index:5;
pointer-events:none;
background:
radial-gradient(ellipse at 50% 48%, transparent 0%, transparent 38%, rgba(0,0,0,0.22) 70%, rgba(0,0,0,0.72) 100%),
linear-gradient(to right, rgba(0,0,0,0.42) 0%, transparent 16%, transparent 84%, rgba(0,0,0,0.42) 100%),
linear-gradient(to bottom, rgba(255,255,255,0.030) 0%, transparent 18%, transparent 78%, rgba(0,0,0,0.26) 100%);
}

.clbi-nations-globe-topbar,
.clbi-nations-globe-bottombar,
.clbi-nations-globe-sidecard,
.clbi-nations-globe-loading,
.clbi-nations-globe-error {
position:absolute;
z-index:9;
box-sizing:border-box;
pointer-events:none;
}

.clbi-nations-globe-topbar {
left:0;
right:0;
top:0;
height:24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:0 7px;
background:rgba(8,8,8,0.84);
border:0;
border-bottom:1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
inset 0 -1px 0 rgba(0,0,0,0.72);
}

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

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

.clbi-nations-globe-bottombar {
left:0;
right:0;
bottom:0;
height:24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:0 7px;
background:rgba(8,8,8,0.78);
border:0;
border-top:1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.045),
inset 0 -1px 0 rgba(0,0,0,0.72);
}

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

.clbi-nations-globe-controls {
flex:0 0 auto;
display:flex;
align-items:center;
gap:4px;
pointer-events:auto;
}

.clbi-nations-globe-btn {
display:inline-flex;
align-items:center;
justify-content:center;
height:18px;
min-width:42px;
padding:0 5px;
box-sizing:border-box;
background:#101010;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#e2e2e2;
font-size:9px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
cursor:pointer;
}

.clbi-nations-globe-btn:hover,
.clbi-nations-globe-btn.is-active {
background:#1d1d1d;
border-color:#555555 #333333 #050505 #333333;
color:#ffffff;
}


/* 지구본 AUTO/RESET 버튼 효과를 좌측 NEWS 버튼 공식과 동일하게 통일한다. */
.clbi-nations-globe-btn {
background:#1d1d1d !important;
border:1px solid #050505 !important;
color:#e2e2e2 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
transition:none !important;
outline:0 !important;
}

.clbi-nations-globe-btn:hover,
.clbi-nations-globe-btn:focus,
.clbi-nations-globe-btn:focus-visible,
.clbi-nations-globe-btn.is-active {
background:#1d1d1d !important;
border-color:#050505 !important;
color:#ffffff !important;
outline:0 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}

.clbi-nations-globe-btn:active,
.clbi-nations-globe-btn.is-active:active {
background:#101010 !important;
border-color:#050505 !important;
color:#e2e2e2 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
}

.clbi-nations-globe-loading,
.clbi-nations-globe-error {
left:50%;
top:50%;
transform:translate(-50%, -50%);
min-width:210px;
max-width:calc(100% - 32px);
padding:8px 10px;
background:rgba(8,8,8,0.92);
border:1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.055),
inset 0 -1px 0 rgba(0,0,0,0.72),
0 8px 24px rgba(0,0,0,0.54);
color:#e2e2e2;
font-size:10px;
font-weight:700;
line-height:1.35;
text-align:center;
white-space:normal;
}

.clbi-nations-globe-error {
color:#c88a80;
}

.clbi-nations-globe-window.is-ready .clbi-nations-globe-loading,
.clbi-nations-globe-window.has-error .clbi-nations-globe-loading {
display:none;
}

.clbi-nations-globe-window:not(.has-error) .clbi-nations-globe-error {
display:none;
}

@media screen and (max-width:900px) {
.clbi-nations-globe-window {
height:300px;
min-height:300px;
}

.clbi-nations-globe-controls {
display:none;
}
}

/* =====================================================================
   CLBI Nations — individual existing-panel layout
   Scope: 국가 및 조합 상단 개별 패널
   - No clbi-nations-board outer frame.
   - Panels are same-level modules.
   - Gaps are real #080808 background.
   - Map row order: button / 4px gap / globe panel / 4px gap / button.
   ===================================================================== */

.clbi-nations-panel-stack,
.clbi-nations-panel-stack * {
box-sizing:border-box;
}

.clbi-nations-panel-stack {
--clbi-nations-gap:4px;
--clbi-nations-side-button-w:60px;
--clbi-nations-map-h:480px;
display:flex !important;
flex-direction:column !important;
gap:var(--clbi-nations-gap) !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
background:#080808 !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
color:#e2e2e2;
font-size:11px;
line-height:1.4;
}

.clbi-nations-panel-stack > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}

.clbi-nations-panel-stack > br,
.clbi-nations-panel-stack > p:empty,
.clbi-nations-panel-stack > p:has(> br:only-child) {
display:none !important;
}

.clbi-nations-era-panel,
.clbi-nations-module-panel,
.clbi-nations-section-panel {
position:relative !important;
width:100% !important;
margin:0 !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-radius:0 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
overflow:hidden !important;
}

.clbi-nations-era-panel {
min-height:28px !important;
padding:8px !important;
display:flex !important;
align-items:stretch !important;
justify-content:center !important;
}

.clbi-nations-era-panel > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}

.clbi-nations-era-panel > .mw-collapsible {
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
}

.clbi-nations-era-panel > .mw-collapsible.mw-collapsed {
display:none !important;
}

.clbi-nations-era-panel .clbi-nations-era-title-plate {
position:relative !important;
top:auto !important;
width:100% !important;
min-height:30px !important;
height:26px !important;
margin:0 !important;
padding:0 10px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#080808 !important;
border:0 !important;
border-radius:0 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
color:#e2e2e2 !important;
font-family:inherit !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}

.clbi-nations-section-panel {
height:24px !important;
min-height:24px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}

.clbi-nations-section-title {
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 8px !important;
color:#e2e2e2 !important;
font-family:inherit !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}

.clbi-nations-map-row {
display:flex !important;
align-items:stretch !important;
gap:var(--clbi-nations-gap) !important;
width:100% !important;
height:var(--clbi-nations-map-h) !important;
min-height:var(--clbi-nations-map-h) !important;
margin:0 !important;
padding:0 !important;
background:#080808 !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}

.clbi-nations-map-row > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}

.clbi-nations-era-side-slot {
position:relative !important;
flex:0 0 var(--clbi-nations-side-button-w) !important;
width:var(--clbi-nations-side-button-w) !important;
min-width:var(--clbi-nations-side-button-w) !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}

.clbi-nations-era-side-slot > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}

.clbi-nations-era-side-slot > .mw-collapsible {
position:absolute !important;
inset:0 !important;
height:100% !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
overflow:visible !important;
pointer-events:none !important;
}

.clbi-nations-era-side-slot > .mw-collapsible.mw-collapsed {
display:none !important;
}

.clbi-nations-era-side-button {
position:absolute !important;
top:0 !important;
bottom:0 !important;
width:var(--clbi-nations-side-button-w) !important;
height:100% !important;
margin:0 !important;
padding:0 6px !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-radius:0 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
color:#e2e2e2 !important;
font-family:inherit !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
white-space:nowrap !important;
cursor:pointer !important;
user-select:none !important;
overflow:hidden !important;
pointer-events:auto !important;
}

.clbi-nations-era-side-button-left {
left:0 !important;
right:auto !important;
}

.clbi-nations-era-side-button-right {
right:0 !important;
left:auto !important;
}

.clbi-nations-era-side-button:hover,
.clbi-nations-era-side-button:focus {
background:#1d1d1d !important;
border-color:#050505 !important;
color:#ffffff !important;
outline:0 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}

.clbi-nations-era-side-button:active {
background:#101010 !important;
border-color:#050505 !important;
color:#e2e2e2 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
}

.clbi-nations-era-side-button * {
pointer-events:none !important;
}

.clbi-nations-era-side-label {
display:inline-block !important;
line-height:1 !important;
color:inherit !important;
font-size:24px !important;
font-weight:700 !important;
letter-spacing:0 !important;
writing-mode:horizontal-tb !important;
text-orientation:mixed !important;
}

.clbi-nations-globe-panel {
position:relative !important;
flex:1 1 auto !important;
min-width:0 !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
background:#080808 !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}

.clbi-nations-globe-panel > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}

.clbi-nations-globe-panel > .clbi-nations-globe-window {
width:100% !important;
height:var(--clbi-nations-map-h) !important;
min-height:var(--clbi-nations-map-h) !important;
margin:0 !important;
}

.clbi-nations-module-title {
height:24px !important;
min-height:24px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
padding:0 8px !important;
background:#1d1d1d !important;
border-bottom:0 !important;
color:#e2e2e2 !important;
font-family:inherit !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010 !important;
}

.clbi-nations-module-body {
margin:0 !important;
padding:8px 8px 4px 8px !important;
background:#1d1d1d !important;
box-shadow:
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}

.clbi-nations-module-body > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}

.clbi-nations-force-grid {
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:20px !important;
width:100% !important;
margin:0 !important;
padding:0 72px !important;
box-sizing:border-box !important;
}

.clbi-nations-force-card {
min-width:0 !important;
height:140px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}

.clbi-nations-force-card > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}

.clbi-nations-force-card > .mw-collapsible {
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
}

.clbi-nations-force-card > .mw-collapsible.mw-collapsed {
display:none !important;
}

@media screen and (max-width:900px) {
.clbi-nations-panel-stack {
--clbi-nations-side-button-w:52px;
--clbi-nations-map-h:320px;
}

.clbi-nations-era-side-label {
font-size:20px !important;
}

.clbi-nations-force-grid {
gap:8px !important;
padding:0 !important;
}
}

/* =====================================================================
   CLBI Nations — Historical Events panel / scoped clean block
   Basis:
   - Title copies the actual side information title structure:
     min-height 34px, transparent title field over the parent #1d1d1d face,
     no independent title background or shadow.
   - Body keeps the existing Nations module-panel outer #050505 frame.
   - Inner well follows the existing tabpanel-body direction without adding
     another #050505 border.
   - Event items keep the accepted compact #101010 item surface.
   ===================================================================== */

.clbi-nations-history-panel > .clbi-nations-module-title {
height:auto !important;
min-height:34px !important;
max-height:none !important;
margin:0 !important;
padding:0 2px !important;
box-sizing:border-box !important;
font-weight:700 !important;
font-size:12px !important;
color:#e2e2e2 !important;
border:0 !important;
background:transparent !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
box-shadow:none !important;
}

.clbi-nations-history-panel > .clbi-nations-module-body.clbi-nations-history-body {
position:relative !important;
z-index:1 !important;
display:block !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 8px 8px 8px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:0 !important;
border-radius:0 !important;
box-shadow:
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
transform:none !important;
overflow:hidden !important;
}

.clbi-nations-history-panel + .clbi-nations-tabpanel {
margin-top:24px !important;
}

.clbi-nations-history-list {
display:grid !important;
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
gap:2px !important;
width:100% !important;
margin:0 !important;
padding:3px !important;
box-sizing:border-box !important;
background:#080808 !important;
border:0 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
}

.clbi-nations-history-item {
display:grid !important;
grid-template-columns:92px minmax(0, 1fr) !important;
align-items:center !important;
gap:2px !important;
min-width:0 !important;
min-height:16px !important;
height:auto !important;
margin:0 !important;
padding:2px !important;
box-sizing:border-box !important;
background:#101010 !important;
border:1px solid #050505 !important;
box-shadow:inset 0 1px 0 #1d1d1d !important;
font-size:10px !important;
line-height:1 !important;
overflow:hidden !important;
color:inherit !important;
}

.clbi-nations-history-period,
.clbi-nations-history-event-name {
min-width:0 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
color:inherit !important;
}

.clbi-nations-history-period {
font-size:9px !important;
font-weight:700 !important;
letter-spacing:.01em !important;
}

.clbi-nations-history-event-name {
font-size:10px !important;
font-weight:700 !important;
}

.clbi-nations-history-event-name a {
display:inline !important;
color:inherit !important;
text-decoration:none !important;
}

.clbi-nations-history-item-major {
background:#101010 !important;
border-color:#050505 !important;
box-shadow:inset 0 1px 0 #1d1d1d !important;
}

@media (max-width:1180px) {
.clbi-nations-history-list {
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}
}

@media (max-width:820px) {
.clbi-nations-history-list {
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
}


/* CLBI Nations / Historical Events year-tabs
 * Baseline remains clbiwiki-nations-historical-events-title-exact-side.
 * The selector uses a separate JS tab system matching the country panel's active/hidden model:
 * .is-active on the selected tab and hidden on inactive pages.
 * Button surface is copied from the left/right sidebar action buttons.
 */
.clbi-nations-history-panel > .clbi-nations-module-body.clbi-nations-history-body {
display:block !important;
}

.clbi-nations-history-pages {
display:block !important;
width:100% !important;
margin:0 0 2px 0 !important;
padding:0 !important;
box-sizing:border-box !important;
}

.clbi-nations-history-page {
display:grid !important;
}

.clbi-nations-history-page[hidden],
.clbi-nations-history-page:not(.is-active) {
display:none !important;
}

.clbi-nations-history-year-well {
display:block !important;
width:100% !important;
margin:0 !important;
padding:3px !important;
box-sizing:border-box !important;
background:#080808 !important;
border:0 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
}

.clbi-nations-history-year-list {
display:grid !important;
grid-template-columns:repeat(11, minmax(0, 1fr)) !important;
gap:2px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}

.clbi-nations-history-year-list > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}

.clbi-nations-history-year-list br {
display:none !important;
}

.clbi-nations-history-year-button {
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-width:0 !important;
height:26px !important;
min-height:26px !important;
max-height:26px !important;
margin:0 !important;
padding:0 7px !important;
box-sizing:border-box !important;
background:
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;
border:1px solid !important;
border-color:
#333333
#202020
#181818
#202020 !important;
border-radius:0 !important;
color:#e2e2e2 !important;
cursor:pointer !important;
font-size:11px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040) !important;
user-select:none !important;
}

.clbi-nations-history-year-button:hover,
.clbi-nations-history-year-button:focus {
background:
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;
border-color:
#444444
#333333
#202020
#333333 !important;
color:#ffffff !important;
outline:0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
0 0 0 1px rgba(255,255,255,0.018) !important;
}

.clbi-nations-history-year-button.is-active,
.clbi-nations-history-year-button:active {
background:
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;
border-color:
#050505
#202020
#333333
#202020 !important;
color:#ffffff !important;
box-shadow:
inset 1px 1px 3px rgba(0,0,0,0.82),
inset -1px -1px 0 rgba(255,255,255,0.035) !important;
}

@media (max-width:1180px) {
.clbi-nations-history-year-list {
grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
}
}

@media (max-width:820px) {
.clbi-nations-history-year-list {
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}
}


/* CLBI Nations / Historical Events year buttons — era-side-button visual correction
 * The previous version used sidebar profile action button gradients.
 * This override uses the Nations side era button surface itself:
 * background #1d1d1d, #050505 1px border, #555555/#101010 inset frame.
 * Geometry only is adapted to a horizontal 11-button row.
 */
.clbi-nations-history-year-list {
display:grid !important;
grid-template-columns:repeat(11, minmax(0, 1fr)) !important;
gap:2px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}

.clbi-nations-history-year-list > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}

.clbi-nations-history-year-list br {
display:none !important;
}

.clbi-nations-history-year-button {
position:relative !important;
top:auto !important;
bottom:auto !important;
left:auto !important;
right:auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-width:0 !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
margin:0 !important;
padding:0 6px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-radius:0 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
color:#e2e2e2 !important;
cursor:pointer !important;
font-family:inherit !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
user-select:none !important;
}

.clbi-nations-history-year-button:hover,
.clbi-nations-history-year-button:focus {
background:#1d1d1d !important;
border-color:#050505 !important;
color:#ffffff !important;
outline:0 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}

.clbi-nations-history-year-button.is-active,
.clbi-nations-history-year-button:active {
background:#101010 !important;
border-color:#050505 !important;
color:#e2e2e2 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
}

/* Keep the accepted history-to-country visual gap model from title-exact-side. */
.clbi-nations-panel-stack > .clbi-nations-history-panel + .clbi-nations-tabpanel,
.clbi-nations-history-panel + .clbi-nations-tabpanel {
margin-top:24px !important;
}

@media (max-width:1180px) {
.clbi-nations-history-year-list {
grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
}
}

@media (max-width:820px) {
.clbi-nations-history-year-list {
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}
}


/* CLBI Nations / Historical Events year-content frame gap correction
 * Match the country information panel rhythm: the structural #1d1d1d frame
 * between two internal wells should read as 4px, not the 2px item gap.
 * This changes only the gap between event content well and year-button well.
 */
.clbi-nations-history-pages {
margin:0 0 4px 0 !important;
}


/* CLBI Nations / Historical Events fixed five-row viewport
 * The event well keeps a stable five-row visual height even when a year has no events.
 * More than five vertical rows scroll inside the event well.
 */
.clbi-nations-history-page {
position:relative !important;
height:calc((18px * 5) + (2px * 4) + (3px * 2)) !important;
min-height:calc((18px * 5) + (2px * 4) + (3px * 2)) !important;
max-height:calc((18px * 5) + (2px * 4) + (3px * 2)) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
overscroll-behavior:contain !important;
align-content:start !important;
grid-auto-rows:18px !important;
}

.clbi-nations-history-page[hidden],
.clbi-nations-history-page:not(.is-active) {
display:none !important;
}

.clbi-nations-history-empty {
position:absolute !important;
inset:3px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-width:0 !important;
min-height:0 !important;
box-sizing:border-box !important;
color:inherit !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
white-space:nowrap !important;
pointer-events:none !important;
}

.clbi-nations-history-empty-en {
display:none !important;
}

html[lang|="en"] .clbi-nations-history-empty-ko,
body[lang|="en"] .clbi-nations-history-empty-ko {
display:none !important;
}

html[lang|="en"] .clbi-nations-history-empty-en,
body[lang|="en"] .clbi-nations-history-empty-en {
display:inline !important;
}


/* CLBI Nations / direct country body fill
 * Keep real catlinks and the confirmed historical-events 5-row state.
 * JS sets .clbi-nations-tabpanel-body height directly; CSS only protects overflow.
 */
body.page-국가_및_조합 .clbi-nations-tabpanel-body.clbi-nations-country-body-filled,
body.page-Nations_\&_Factions .clbi-nations-tabpanel-body.clbi-nations-country-body-filled,
body:has(.clbi-nations-panel-stack) .clbi-nations-tabpanel-body.clbi-nations-country-body-filled {
overflow:hidden !important;
}





/* CLBI / universal fill-to-real-catlinks contract
 * No fake category panel.
 * No catlinks movement.
 * No height-afterpaint JS.
 *
 * Structure:
 *   content frame
 *     content body flex chain
 *       .clbi-fill-remaining  -> fills remaining body space
 *       real MediaWiki catlinks -> final flex item
 *
 * The 4px gaps are owned by the parent flex container, not catlinks margins.
 */

/* The content frame and MediaWiki wrappers become a vertical flex chain only
   when a page explicitly has a fill-remaining body block. */
.liberty-content-main:has(.clbi-fill-remaining) {
display:flex !important;
flex-direction:column !important;
min-height:0 !important;
overflow:hidden !important;
}

.liberty-content-main:has(.clbi-fill-remaining) > #mw-content-text,
.liberty-content-main:has(.clbi-fill-remaining) article#mw-content-text,
.liberty-content-main:has(.clbi-fill-remaining) .mw-body-content,
.liberty-content-main:has(.clbi-fill-remaining) .mw-content-ltr {
display:flex !important;
flex-direction:column !important;
flex:1 1 auto !important;
min-height:0 !important;
overflow:hidden !important;
}

/* Actual relation owner: this parent supplies the 4px gap above catlinks and
   the 4px padding below it.  The background here is the normal Nations gap
   color, so the revealed interval is #080808 rather than #1d1d1d. */
.liberty-content-main:has(.clbi-fill-remaining) .mw-parser-output:has(.clbi-fill-remaining) {
display:flex !important;
flex-direction:column !important;
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
gap:4px !important;
padding-bottom:4px !important;
box-sizing:border-box !important;
background:#080808 !important;
overflow:hidden !important;
}

/* The block that should consume the body space.  This is universal; Nations
   simply opts its stack into the rule with .clbi-fill-remaining. */
.liberty-content-main:has(.clbi-fill-remaining) .mw-parser-output:has(.clbi-fill-remaining) > .clbi-fill-remaining {
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
}

/* Nations is one consumer of the universal contract. */
.clbi-fill-remaining.clbi-nations-panel-stack > .clbi-nations-tabpanel {
flex:1 1 auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:visible !important;
}

.clbi-fill-remaining.clbi-nations-panel-stack > .clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
}

/* Real MediaWiki catlinks as the final flex item.
   Visual panel rules are single-sourced in Theme.css. */
.liberty-content-main:has(.clbi-fill-remaining) .mw-parser-output:has(.clbi-fill-remaining) > #catlinks,
.liberty-content-main:has(.clbi-fill-remaining) .mw-parser-output:has(.clbi-fill-remaining) > .catlinks {
flex:0 0 auto !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
}
/* =====================================================================
   CLBI Nations — decade-era content switching
   - Era buttons now switch the actual active decade state.
   - 1950 keeps the existing populated panels.
   - Empty decades expose their own WIP panels while the globe reloads that
     decade's data URLs and displays the globe error layer if files are absent.
   ===================================================================== */

.clbi-nations-era-title-plate[hidden],
.clbi-nations-era-title-plate:not(.is-active)[data-era],
.clbi-nations-era-content[hidden],
.clbi-nations-era-content:not(.is-active) {
display:none !important;
}

.clbi-nations-era-content {
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}

.clbi-nations-era-content > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}

.clbi-nations-era-side-slot > .clbi-nations-era-side-button {
position:absolute !important;
inset:0 auto 0 0 !important;
pointer-events:auto !important;
}

.clbi-nations-era-side-slot-right > .clbi-nations-era-side-button,
.clbi-nations-era-side-button-right {
left:auto !important;
right:0 !important;
}

.clbi-nations-history-year-list[data-decade-only="1"] {
grid-template-columns:repeat(10, minmax(0, 1fr)) !important;
}

.clbi-nations-era-wip .clbi-nations-tabpanel-body {
min-height:96px !important;
}

.clbi-nations-era-wip .clbi-nations-tabpanel-continent[hidden] {
display:none !important;
}

.clbi-nations-era-wip .clbi-nations-tabpanel-continent.is-active {
display:block !important;
}

.clbi-nations-era-wip .clbi-nations-tabpanel-well {
min-height:54px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}

.clbi-nations-era-wip .clbi-nations-history-empty,
.clbi-nations-era-wip-message {
color:#e2e2e2 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.35 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}

.clbi-nations-era-wip-message-en {
display:none !important;
}

html[lang|="en"] .clbi-nations-era-wip-message-ko,
body[lang|="en"] .clbi-nations-era-wip-message-ko {
display:none !important;
}

html[lang|="en"] .clbi-nations-era-wip-message-en,
body[lang|="en"] .clbi-nations-era-wip-message-en {
display:inline !important;
}

@media (max-width:1180px) {
.clbi-nations-history-year-list[data-decade-only="1"] {
grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
}
}

@media (max-width:820px) {
.clbi-nations-history-year-list[data-decade-only="1"] {
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}
}

/* =====================================================================
   CLBI Nations — preserve remaining-space fill inside decade wrapper
   The decade-era wrapper sits between .clbi-nations-panel-stack and the
   country tab panel, so the older direct-child flex fill needs this bridge.
   ===================================================================== */

.clbi-fill-remaining.clbi-nations-panel-stack > .clbi-nations-era-content.is-active {
display:flex !important;
flex:1 1 auto !important;
flex-direction:column !important;
gap:var(--clbi-nations-gap) !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
background:#080808 !important;
overflow:visible !important;
}

.clbi-fill-remaining.clbi-nations-panel-stack > .clbi-nations-era-content.is-active > .clbi-nations-tabpanel {
flex:1 1 auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:visible !important;
}

.clbi-fill-remaining.clbi-nations-panel-stack > .clbi-nations-era-content.is-active > .clbi-nations-tabpanel > .clbi-nations-tabpanel-body {
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
}

/* Nations globe reload safety: stale loading/error layers must not stay over a ready globe. */
.clbi-nations-globe-window.is-ready .clbi-nations-globe-loading,
.clbi-nations-globe-window.is-ready .clbi-nations-globe-error,
.clbi-nations-globe-window.has-error .clbi-nations-globe-loading {
display:none !important;
}

.clbi-nations-globe-window:not(.has-error) .clbi-nations-globe-error {
display:none !important;
}

/* JSON 기반 국가 목록 렌더링 */
.clbi-nations-list-item {
display:inline-flex !important;
align-items:baseline !important;
justify-content:flex-start !important;
vertical-align:baseline !important;
white-space:nowrap !important;
word-break:keep-all !important;
overflow-wrap:normal !important;
break-inside:avoid !important;
page-break-inside:avoid !important;
}

.clbi-nations-list-flag {
display:inline-block;
position:relative;
top:var(--flag-y, 0px);
flex:0 0 auto;
height:auto;
max-height:16px;
object-fit:contain;
vertical-align:-2px;
margin-right:3px;
background:#080808;
box-sizing:content-box;
}

.clbi-nations-list-flag.has-border {
border:1px solid #050505;
box-shadow:0 0 0 1px #2b2b2b;
}

.clbi-nations-list-flag.is-top {
--flag-y:-1px;
}

.clbi-nations-list-link,
.clbi-nations-list-label {
color:#e2e2e2 !important;
text-decoration:none !important;
white-space:nowrap !important;
word-break:keep-all !important;
overflow-wrap:normal !important;
}

.clbi-nations-list-link:hover {
color:#ffffff !important;
text-decoration:none !important;
}

.clbi-nations-list-divider {
display:inline-block;
margin:0 5px;
color:#777777;
}

/* 20260705: 국가 목록 국기 렌더링 정규화
   - width 기준으로 렌더링하면 정방형/세로형 국기가 과대하게 보이고, 가로형 국기는 너무 작아진다.
   - 실제 표시는 같은 높이의 flag slot 안에서 맞추고, 없는 파일은 깨진 이미지 대신 결손 슬롯으로 표시한다. */
.clbi-nations-list-item {
align-items:center !important;
}

.clbi-nations-list-flag-slot {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
position:relative !important;
top:var(--flag-y, 0px) !important;
flex:0 0 auto !important;
min-width:14px !important;
max-width:var(--flag-max-w, 24px) !important;
height:14px !important;
margin-right:3px !important;
vertical-align:-2px !important;
overflow:hidden !important;
line-height:0 !important;
}

.clbi-nations-list-flag-slot .clbi-nations-list-flag {
display:block !important;
position:static !important;
top:auto !important;
width:auto !important;
height:12px !important;
max-width:100% !important;
max-height:12px !important;
margin:0 !important;
vertical-align:middle !important;
object-fit:contain !important;
background:#080808 !important;
box-sizing:border-box !important;
}

.clbi-nations-list-flag-slot .clbi-nations-list-flag.has-border {
border:1px solid #050505 !important;
box-shadow:0 0 0 1px #2b2b2b !important;
}

.clbi-nations-list-flag-slot.is-missing .clbi-nations-list-flag {
display:none !important;
}

.clbi-nations-list-flag-slot.is-missing::before {
content:"";
display:block;
width:16px;
height:10px;
border:1px solid #4a1b1b;
background:repeating-linear-gradient(45deg,#130707 0,#130707 3px,#2a0b0b 3px,#2a0b0b 6px);
box-shadow:0 0 0 1px #2d1111;
box-sizing:border-box;
}


/* 20260705: 국기 테두리 기준 보정
   테두리는 16x16px 박스 안에 비율 유지로 들어간 실제 이미지의 외형을 따라간다.
   국기를 고정 사각형 테두리에 끼워 맞추지 않는다. */
.clbi-nations-list-flag-slot {
min-width:0 !important;
width:auto !important;
max-width:none !important;
height:18px !important;
overflow:visible !important;
line-height:0 !important;
}

.clbi-nations-list-flag-slot .clbi-nations-list-flag {
width:auto !important;
height:auto !important;
max-width:16px !important;
max-height:16px !important;
object-fit:contain !important;
box-sizing:content-box !important;
}

/* 20260705: 국가 목록 국기 행 정렬/결손 표시 정리
   실제 국기 이미지는 16x16 한계 안에서 비율 유지, 테두리는 이미지 외형을 따라간다.
   결손 국기는 빨간 대체 표시를 내지 않고 빈 항목처럼 숨긴다. */
.clbi-nations-list-item {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  vertical-align:middle !important;
  line-height:18px !important;
  white-space:nowrap !important;
}

.clbi-nations-list-flag-slot {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  top:auto !important;
  transform:translateY(var(--flag-y, 0px)) !important;
  flex:0 0 auto !important;
  min-width:0 !important;
  width:auto !important;
  height:18px !important;
  margin-right:3px !important;
  overflow:visible !important;
  line-height:0 !important;
  vertical-align:middle !important;
}

.clbi-nations-list-flag-slot .clbi-nations-list-flag {
  display:block !important;
  position:static !important;
  top:auto !important;
  width:auto !important;
  height:auto !important;
  max-width:16px !important;
  max-height:16px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  object-fit:contain !important;
  vertical-align:middle !important;
  background:#080808 !important;
  box-sizing:content-box !important;
}

.clbi-nations-list-flag-slot .clbi-nations-list-flag.has-border {
  border:1px solid #050505 !important;
  box-shadow:0 0 0 1px #2b2b2b !important;
}

.clbi-nations-list-flag-slot.is-missing {
  display:none !important;
}

.clbi-nations-list-flag-slot.is-missing::before {
  content:none !important;
  display:none !important;
}

.clbi-nations-list-link,
.clbi-nations-list-label,
.clbi-nations-list-divider {
  display:inline-flex !important;
  align-items:center !important;
  line-height:18px !important;
  vertical-align:middle !important;
}

/* 20260705: CLBI 국가 목록 국기 획 단일 기준
   국기 획은 사각 border가 아니라 기존 [[파일:...|테두리]] 계열의 alpha drop-shadow를 사용한다. */
.clbi-nations-list-flag-slot {
  overflow:visible !important;
}

.clbi-nations-list-flag.has-border,
.clbi-nations-list-flag-slot .clbi-nations-list-flag.has-border {
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  background:transparent !important;
  filter:var(--clbi-flag-stroke-filter) !important;
}

.clbi-nations-list-flag.is-missing,
.clbi-nations-list-flag-slot.is-missing .clbi-nations-list-flag {
  filter:none !important;
}
/* 20260705: 국가 패널 항목 hover 2-state normalization
   - gradient / transition 제거.
   - 배경 효과 없이 일반 상태와 hover 상태의 텍스트 밝기만 구분한다. */
.clbi-nations-tabpanel .clbi-nations-list-item,
.clbi-nations-tabpanel .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-label {
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  transition:none !important;
}

.clbi-nations-tabpanel .clbi-nations-list-item:hover .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-item:focus-within .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-item.is-panel-hovered .clbi-nations-list-link,
.clbi-nations-tabpanel .clbi-nations-list-item:hover .clbi-nations-list-label,
.clbi-nations-tabpanel .clbi-nations-list-item:focus-within .clbi-nations-list-label,
.clbi-nations-tabpanel .clbi-nations-list-item.is-panel-hovered .clbi-nations-list-label {
  color:#ffffff !important;
  background:transparent !important;
  background-image:none !important;
  text-decoration:none !important;
}
/* =====================================================================
   CLBI Nations — seamless continent/era switching optimization
   - Active era remains visually stable while Q/E preview changes only the
     lightweight era shell until the final commit.
   - Current-era continent panels stay warm in DOM and switch by state only,
     avoiding hidden/display layout spikes during globe inertia.
   ===================================================================== */

.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body {
position:relative !important;
contain:layout paint style !important;
will-change:auto !important;
}

.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent,
.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent[hidden] {
display:block !important;
box-sizing:border-box !important;
contain:layout paint style !important;
}

.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent:not(.is-active) {
position:absolute !important;
left:8px !important;
right:8px !important;
top:8px !important;
margin:0 !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
z-index:0 !important;
}

.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent.is-active {
position:relative !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
z-index:1 !important;
}

.clbi-fill-remaining.clbi-nations-panel-stack.is-era-previewing > .clbi-nations-era-content.is-active {
contain:layout paint style !important;
}

.clbi-fill-remaining.clbi-nations-panel-stack.is-era-previewing > .clbi-nations-era-content.is-active > .clbi-nations-tabpanel,
.clbi-fill-remaining.clbi-nations-panel-stack.is-era-previewing > .clbi-nations-era-content.is-active > .clbi-nations-history-panel {
will-change:auto !important;
}
/* =====================================================================
   Nations continent switching — fast path refinement 20260708
   ---------------------------------------------------------------------
   The first light-switch patch kept inactive continent bodies warm, but it
   still used content-visibility:hidden. That saves idle paint work, yet it
   also makes the browser re-open layout/paint for the next continent at the
   exact click/shortcut frame. Since flags and rows are already cached, the
   smoother strategy is to keep all continent bodies layout-warm and switch
   only visibility/opacity/pointer-events. NationsPanel.js also pins this
   body well to the tallest warm continent via --clbi-nations-continent-body-min-h.
   ===================================================================== */
.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body {
min-height:calc(var(--clbi-nations-continent-body-min-h, 0px) + 16px) !important;
}

.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent:not(.is-active),
.clbi-nations-tabpanel.clbi-nations-continent-cache > .clbi-nations-tabpanel-body > .clbi-nations-tabpanel-continent.is-active {
content-visibility:visible !important;
}

/* 20260708 deeper pass: do not force inactive continent bodies into their own GPU layers.
   The globe is already WebGL; extra composited layers here can make the switch feel
   heavier instead of smoother on the same GPU queue. */
.clbi-nations-tabpanel.is-continent-switching .clbi-nations-tabpanel-body {
contain:layout paint style !important;
}

.wiki-decoration[data-decoration-visible="0"] {
display:none !important;
}

/* =====================================================================
   Foundation 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;
}