미디어위키:Template.css

@import url('/index.php?title=MediaWiki:Template.Infobox.css&action=raw&ctype=text/css');

/* Proitem 애니메이션 */
.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); }
}

/* 펼접 */

[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 .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:
        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:
        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 가로선 */
.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;
}

/* =========================================
   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 > * {
    position: relative;
    z-index: 2;
}

/* 빛 번짐 대상 */
.crt-glow-content {
    position: relative;
    z-index: 2;
    text-shadow:
        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:
        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 가로선 */
.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;
}

/* =========================================
   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 > * {
    position: relative;
    z-index: 2;
}

/* 빛 번짐 + RGB split 대상 */
.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;
}

/* 제목류 발광 + 더 강한 RGB split */
.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);
}

/* 이미지 외곽 RGB split + 약한 발광 */
.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 가로선 */
.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;
}

/* =========================================
   Animations
   ========================================= */

@keyframes crt-scanlines-up {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-72px);
    }
}

@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%, #070707 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 유리 곡면 느낌 */
.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;
}

/* CRT 밖으로 빼기 */
#clbi-main-crt-hero-wrap {
    width: 100%;
    margin: 0 auto 14px auto;
}

#clbi-main-crt-hero {
    width: 100%;
}

/* =========================================
   Compact CRT Media Frame
   flag / coat of arms display
   ========================================= */

.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%,
            #070707 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);
    }
}

/* 관련 틀 상단 제목 */
.related-template-title {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 5px;
    background: #101010;
    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
   recessed / built-in screen + CRT slice tear
   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 #060606;
    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 {
    position: absolute;
    inset: 0;
    z-index: 1;
    line-height: 0;
    overflow: hidden;
}

/* =========================================
   Image layers
   ========================================= */

.crt-page-monitor-image-base {
    position: absolute;
    inset: 0;
    z-index: 3;
    line-height: 0;
    overflow: hidden;
}

.crt-page-monitor-image-bloom {
    position: absolute;
    inset: 0;
    z-index: 4;
    line-height: 0;
    overflow: hidden;
    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 {
    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 {
    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;

    filter:
        brightness(0.84)
        contrast(1.08)
        saturate(0.90);
}

.crt-page-monitor-image-bloom img,
.crt-page-monitor-image-bloom .mw-file-element {
    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(calc(var(--crt-img-scale, 1.04) + 0.02));
    transform-origin: center center;
}

.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 {
    position: absolute;
    inset: 0;
    z-index: 5;
    line-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform, opacity, clip-path, filter;
}

.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-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;

    filter:
        brightness(0.96)
        contrast(1.18)
        saturate(0.82);
}

.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 glass / vignette / scanlines
   ========================================= */

.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
   ========================================= */

@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-scanlines-up {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-80px);
    }
}

@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;
    }
}

/* Compact CRT Portrait Variant */
.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;
}

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

/* HE2: 대사건과 연관된 사건의 상단 하이라이트 */
.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);
}

/* HE1: 대사건 본행 */
.timeline-event.he-root {
    overflow: visible;
}

/* HE1: 제목 뒤의 넓고 낮은 색상판 */
.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%
        );
}

/* HE1: 위아래 기준선 */
.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;
}

/* HE1: 대사건명 텍스트 잔광 */
.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 - Test
   본문용 회의 배석 구성 패널
   ========================================= */

.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;
}

/* 중앙 세로 기준선 - HR 계열 팔레트 */
.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
   recessed display using original CRT banner classes
   ========================================= */

/* screen-header 문서 기본 제목 숨김 */
.liberty-content:has(.screen-header) .liberty-content-header .title {
    display: none !important;
}

/* 본문 컨테이너는 원래 하단 연결 구조를 유지 */
.Liberty .content-wrapper .liberty-content:has(.screen-header) .liberty-content-main {
    position: relative !important;
    box-sizing: border-box !important;
    background: #171717 !important;
    border: 2px solid #854369 !important;
    border-bottom: none !important;
}

/* 이전 실험 잔재 차단 */
.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 {
    position: relative !important;
    width: calc(100% + 32px) !important;
    height: var(--screen-header-height, 360px) !important;
    margin: -16px -16px 0 -16px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #171717 !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: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #171717 !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;
}

/* 기존 CRT 배너 프레임을 디스플레이로 재사용 */
.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;
}

/* 기존 CRT 내부 홈 유지 */
.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;
}

/* 실제 CRT 화면 */
.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;
}

/* 기존 CRT 이미지 레이어 유지 */
.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;
}

/* 기존 CRT 효과 유지 + 효과 범위 확장 */
.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;
}

/* 기존 scanline 유지 + 범위 확장 */
.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;
}

/* glitch / tear 유지 + 범위 확장 */
.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;
}

/* subtitle 완전 제거 */
.screen-header-subtitle {
    display: none !important;
}

/* ScreenHeader 바로 아래 내용 영역만 경계 제거 */
.screen-header + .screen-body {
    border-top: 0 !important;
    margin-top: 0 !important;
}

/* =========================================
   ScreenBody
   retro CRT computer front panel
   ========================================= */

.screen-body {
position: relative;
width: calc(100% + 32px);
margin: 0 -16px 0 -16px;
padding: 18px;
box-sizing: border-box;
background:
linear-gradient(
to bottom,
#171717 0%,
#151515 42%,
#101010 100%
);
border-top: 0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.032),
inset 0 18px 30px rgba(0,0,0,0.36),
inset 0 -24px 36px rgba(0,0,0,0.42),
inset 18px 0 30px rgba(0,0,0,0.24),
inset -18px 0 30px rgba(0,0,0,0.24);
}

.terminal-deck {
position: relative;
box-sizing: border-box;
width: 100%;
min-height: 430px;
padding: 14px;
background:
linear-gradient(
145deg,
#2b2b2b 0%,
#181818 18%,
#101010 54%,
#242424 100%
);
border: 2px solid #2b2b2b;
border-radius: 14px;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.11),
inset 0 -3px 0 rgba(0,0,0,0.82),
inset 3px 0 0 rgba(255,255,255,0.035),
inset -3px 0 0 rgba(0,0,0,0.70),
0 0 0 2px #050505,
0 0 0 4px #242424,
0 8px 18px rgba(0,0,0,0.55);
overflow: hidden;
}

.terminal-deck::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.14;
background:
repeating-linear-gradient(
135deg,
rgba(255,255,255,0.030) 0px,
rgba(255,255,255,0.030) 1px,
transparent 1px,
transparent 5px
),
radial-gradient(
ellipse at 24% 8%,
rgba(255,255,255,0.08) 0%,
transparent 42%
);
mix-blend-mode: screen;
}

.terminal-deck::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
box-shadow:
inset 0 0 42px rgba(0,0,0,0.36),
inset 0 0 92px rgba(0,0,0,0.24);
}

.terminal-top-rail,
.terminal-bottom-rail,
.terminal-face {
position: relative;
z-index: 3;
}

.terminal-top-rail {
display: grid;
grid-template-columns: 18px 1fr auto 18px;
gap: 12px;
align-items: center;
height: 34px;
margin-bottom: 12px;
padding: 0 10px;
box-sizing: border-box;
background:
linear-gradient(
to bottom,
#1c1c1c 0%,
#101010 100%
);
border: 1px solid #050505;
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.76),
0 1px 0 rgba(255,255,255,0.035);
}

.terminal-rail-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
color: #dcdcdc;
text-shadow: 0 0 5px rgba(0,0,0,0.85);
}

.terminal-screw {
width: 13px;
height: 13px;
border-radius: 50%;
background:
radial-gradient(circle at 34% 30%, rgba(255,255,255,0.35) 0%, transparent 24%),
linear-gradient(145deg, #444 0%, #111 58%, #050505 100%);
border: 1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
inset 0 -1px 0 rgba(0,0,0,0.80),
0 0 0 1px rgba(255,255,255,0.035);
}

.terminal-status-lamps {
display: flex;
align-items: center;
gap: 6px;
}

.terminal-lamp {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
background: #1c1c1c;
border: 1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 0 0 1px rgba(255,255,255,0.025);
vertical-align: middle;
}

.terminal-lamp.on {
background:
radial-gradient(circle at 40% 34%, #d9ff9d 0%, #7fbf3f 42%, #203818 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.28),
0 0 6px rgba(120,210,80,0.46);
}

.terminal-lamp.warn {
background:
radial-gradient(circle at 40% 34%, #ffe1a0 0%, #d48a2a 44%, #3a1c08 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.28),
0 0 6px rgba(255,168,64,0.45);
}

.terminal-face {
display: grid;
grid-template-columns: 220px minmax(0, 1fr) 280px;
gap: 14px;
align-items: stretch;
min-height: 330px;
}

.terminal-left-column,
.terminal-center-column,
.terminal-right-column {
min-width: 0;
}

.terminal-center-column,
.terminal-right-column {
display: flex;
flex-direction: column;
gap: 14px;
}

.terminal-lower-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px;
}

.terminal-panel,
.terminal-display-frame {
position: relative;
box-sizing: border-box;
width: 100%;
min-width: 0;
background:
linear-gradient(
to bottom,
#1A1A1A 0%,
#151515 48%,
#101010 100%
);
border: 2px solid #242424;
border-radius: 8px;
box-shadow:
inset 1px 0 0 rgba(255,255,255,0.055),
inset 0 -1px 0 rgba(255,255,255,0.035),
0 0 0 2px #050505,
0 0 0 3px #242424,
0 4px 12px rgba(0,0,0,0.52);
overflow: hidden;
}

.terminal-panel::before,
.terminal-display-frame::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.060) 0%,
rgba(255,255,255,0.022) 18%,
transparent 45%,
rgba(0,0,0,0.20) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.040) 18%,
transparent 36%,
transparent 100%
);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.022),
inset 0 0 18px rgba(0,0,0,0.34);
}

.terminal-panel::after,
.terminal-display-frame::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.12;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.050) 0px,
rgba(255,255,255,0.050) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}

.terminal-panel-label,
.terminal-display-label {
position: relative;
z-index: 3;
box-sizing: border-box;
padding: 10px 13px 9px 13px;
font-family: 'Galmuri11', sans-serif !important;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
color: #ffffff;
background:
linear-gradient(
to bottom,
#101010 0%,
#0b0b0b 100%
);
border-bottom: 1px solid rgba(133,67,105,0.78);
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555,
0 1px 0 rgba(0,0,0,0.72);
text-shadow:
0 0 3px rgba(255,255,255,0.20),
0 0 8px rgba(212,90,162,0.16);
}

.terminal-main-display {
min-height: 142px;
}

.terminal-side-display {
flex: 1;
}

.terminal-display-content {
position: relative;
z-index: 3;
box-sizing: border-box;
padding: 15px 16px;
min-height: 98px;
font-size: 13px;
line-height: 1.75;
color: #E2E2E2;
background:
linear-gradient(
to bottom,
#080d08 0%,
#061006 100%
);
border-top: 1px solid rgba(255,255,255,0.020);
box-shadow:
inset 0 0 0 1px rgba(135,190,90,0.10),
inset 0 0 20px rgba(60,140,60,0.08),
inset 0 0 34px rgba(0,0,0,0.56);
text-shadow:
0 0 4px rgba(140,220,110,0.20),
0 0 10px rgba(0,0,0,0.90);
}

.terminal-control-bank {
height: 100%;
}

.terminal-small-controls {
margin-top: 14px;
}

.terminal-button {
position: relative;
z-index: 3;
box-sizing: border-box;
width: calc(100% - 20px);
margin: 10px 10px 0 10px;
padding: 9px 11px;
font-size: 12px;
font-weight: 700;
line-height: 1.35;
color: #E2E2E2;
background:
linear-gradient(
to bottom,
#2a2a2a 0%,
#1a1a1a 50%,
#111111 100%
);
border: 1px solid #333;
border-left: 3px solid #854369;
border-radius: 4px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.035),
inset 0 -8px 12px rgba(0,0,0,0.26);
text-shadow:
0 0 4px rgba(0,0,0,0.80);
}

.terminal-button::after {
content: "›";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #d45aa2;
font-size: 12px;
}

.terminal-button.active {
color: #ffffff;
background:
linear-gradient(
to bottom,
#5a2040 0%,
#3d1a2f 52%,
#2e1222 100%
);
border-color: #854369;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
inset 0 -8px 14px rgba(0,0,0,0.26),
0 0 8px rgba(212,90,162,0.16);
}

.terminal-toggle-row {
position: relative;
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
margin: 10px;
padding: 7px 9px;
box-sizing: border-box;
font-size: 11px;
font-weight: 700;
color: #dcdcdc;
background:
linear-gradient(to bottom, #1d1d1d 0%, #101010 100%);
border: 1px solid #333;
border-radius: 4px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.035),
inset 0 -6px 10px rgba(0,0,0,0.26);
}

.terminal-data-panel,
.terminal-sequence-panel {
min-height: 172px;
}

.terminal-data-row {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 74px minmax(0, 1fr);
gap: 10px;
align-items: center;
margin: 10px 12px 0 12px;
}

.terminal-data-key {
font-size: 12px;
font-weight: 700;
color: #ffffff;
text-shadow: 0 0 4px rgba(0,0,0,0.80);
}

.terminal-readout,
.terminal-slot {
box-sizing: border-box;
min-width: 0;
font-size: 12px;
line-height: 1.35;
color: #ffffff;
background:
linear-gradient(
to bottom,
#1b1b1b 0%,
#111111 100%
);
border: 1px solid #333;
border-radius: 4px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.035),
inset 0 -6px 12px rgba(0,0,0,0.30),
0 0 0 1px rgba(0,0,0,0.42);
}

.terminal-readout {
padding: 6px 10px;
font-weight: 700;
text-align: right;
}

.terminal-slot {
position: relative;
z-index: 3;
margin: 10px 12px 0 12px;
padding: 7px 10px;
color: #E2E2E2;
}

.terminal-slot:hover {
border-color: #854369;
color: #ffffff;
background:
linear-gradient(
to bottom,
#252525 0%,
#171717 100%
);
}

.terminal-keypad-panel {
min-height: 160px;
}

.terminal-keypad {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 12px;
box-sizing: border-box;
}

.terminal-keypad > div {
box-sizing: border-box;
min-height: 34px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px 8px;
font-size: 11px;
font-weight: 700;
color: #222;
background:
linear-gradient(
to bottom,
#d7d1c4 0%,
#a8a092 48%,
#716b61 100%
);
border: 1px solid #0a0a0a;
border-radius: 4px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.60),
inset 0 -2px 0 rgba(0,0,0,0.42),
0 1px 0 rgba(255,255,255,0.05);
text-shadow: 0 1px 0 rgba(255,255,255,0.30);
}

.terminal-keypad > div:hover {
filter: brightness(1.08);
}

.terminal-bottom-rail {
display: grid;
grid-template-columns: 1fr 120px 54px 120px 220px;
gap: 14px;
align-items: center;
height: 56px;
margin-top: 12px;
padding: 8px 12px;
box-sizing: border-box;
background:
linear-gradient(
to bottom,
#1c1c1c 0%,
#0e0e0e 100%
);
border: 1px solid #050505;
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.76),
0 1px 0 rgba(255,255,255,0.035);
}

.terminal-slider-group {
display: flex;
align-items: center;
gap: 10px;
}

.terminal-slider {
position: relative;
width: 90px;
height: 8px;
background: #050505;
border: 1px solid #222;
border-radius: 99px;
box-shadow:
inset 0 1px 4px rgba(0,0,0,0.85),
0 1px 0 rgba(255,255,255,0.04);
}

.terminal-slider.short {
width: 62px;
}

.terminal-slider::after {
content: "";
position: absolute;
top: -5px;
left: 52%;
width: 10px;
height: 18px;
border-radius: 3px;
background:
linear-gradient(to bottom, #c8c0b2 0%, #6e675d 100%);
border: 1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.45),
inset 0 -1px 0 rgba(0,0,0,0.56);
}

.terminal-readout-small {
box-sizing: border-box;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
color: #9eff72;
background:
linear-gradient(to bottom, #050805 0%, #020402 100%);
border: 1px solid #1d3317;
border-radius: 4px;
box-shadow:
inset 0 0 10px rgba(100,220,80,0.10),
0 0 6px rgba(100,220,80,0.08);
text-shadow:
0 0 5px rgba(120,255,100,0.42),
0 0 10px rgba(120,255,100,0.18);
}

.terminal-knob {
justify-self: center;
width: 36px;
height: 36px;
border-radius: 50%;
background:
radial-gradient(circle at 38% 30%, rgba(255,255,255,0.34) 0%, transparent 22%),
linear-gradient(145deg, #d2c8b8 0%, #80786d 48%, #27231f 100%);
border: 1px solid #050505;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.42),
inset 0 -3px 0 rgba(0,0,0,0.58),
0 2px 6px rgba(0,0,0,0.50);
}

.terminal-key-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}

.terminal-key-row span {
height: 24px;
border-radius: 4px;
background:
linear-gradient(to bottom, #dfddd7 0%, #9e978d 55%, #625b53 100%);
border: 1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.60),
inset 0 -2px 0 rgba(0,0,0,0.42);
}

.terminal-key-row span.red {
background:
linear-gradient(to bottom, #d66b60 0%, #8a282a 55%, #3a0b0d 100%);
}

.terminal-key-row span.amber {
background:
linear-gradient(to bottom, #ffc36e 0%, #b66c1f 55%, #4a2408 100%);
}

/* 좁은 화면 대응 */
@media screen and (max-width: 1280px) {
.terminal-face {
grid-template-columns: 210px minmax(0, 1fr);
}

.terminal-right-column {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.terminal-bottom-rail {
grid-template-columns: 1fr 110px 46px 110px;
}

.terminal-key-row {
display: none;
}
}

@media screen and (max-width: 980px) {
.terminal-face,
.terminal-lower-row,
.terminal-right-column {
grid-template-columns: 1fr;
}

.terminal-bottom-rail {
grid-template-columns: 1fr;
height: auto;
}

.terminal-slider-group {
justify-content: center;
}

.terminal-readout-small,
.terminal-knob {
justify-self: center;
}
}