미디어위키:Template.css: 두 판 사이의 차이

2026년 5월 10일 (일) 05:49 판

/* =========================================
   Document View System — doc-*
   기본 문서 시스템
   ========================================= */

/* ── screen-body ── */
.screen-body {
    position: relative;
    width: calc(100% + 32px);
    margin: 0 -16px 0 -16px;
    padding: 4px 8px 4px 8px;
    box-sizing: border-box;
    background: #101010;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555,
        inset 0 0 0 1px rgba(255,255,255,0.026),
        inset 0 0 14px rgba(0,0,0,0.30);
    border-top: 0;
    overflow: visible;
    isolation: isolate;
}

.screen-body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    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);
}

.screen-body::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.16;
    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-body ── */
.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: #101010;
    border: 0;
    border-radius: 2px;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555,
        inset 0 0 0 1px rgba(255,255,255,0.026),
        inset 0 0 14px rgba(0,0,0,0.30);
    overflow: hidden;
}

.doc-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    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);
}

.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 #060606;
    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 — 3단 본문 그리드
   ========================================= */

.doc-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 320px;
    gap: 7px;
    align-items: stretch;
    min-height: 480px;
}

.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: #101010;
    border: 0;
    border-radius: 2px;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555,
        inset 0 0 0 1px rgba(255,255,255,0.026),
        inset 0 0 14px rgba(0,0,0,0.30);
    overflow: hidden;
    isolation: isolate;
}

.doc-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    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);
}

.doc-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.16;
    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-panel-title: 패널 헤더 바 ── */
.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: #cfcfcf;
    background: linear-gradient(to bottom, #121212 0%, #0d0d0d 100%);
    border-bottom: 1px solid rgba(133,67,105,0.42);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035),
        inset 0 -1px 0 rgba(0,0,0,0.58);
    text-shadow: 0 1px 0 rgba(0,0,0,0.80);
    text-transform: uppercase;
}

/* =========================================
   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: #0e0e0e;
    border-top: 1px solid #080808;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.60),
        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-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-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: #101010;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555,
        inset 0 0 0 1px rgba(255,255,255,0.026),
        inset 0 0 14px rgba(0,0,0,0.30);
    border: 0;
    border-radius: 2px;
    overflow: hidden;
}

.doc-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    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);
}

.doc-footer > * {
    position: relative;
    z-index: 2;
}

.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-left: 1px solid #111;
    border-right: 1px solid #111;
    border-radius: 99px;
    box-shadow:
        inset 0 1px 4px rgba(0,0,0,0.65),
        0 1px 0 rgba(255,255,255,0.018);
}

.doc-slider.short {
    width: 52px;
}

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

.doc-date {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    box-sizing: border-box;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #9eff72;
    background: linear-gradient(to bottom, #050805 0%, #020402 100%);
    border: 1px solid #1d3317;
    border-radius: 2px;
    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);
}

.doc-knob {
    justify-self: center;
    width: 32px;
    height: 32px;
    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);
}

.doc-keys {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
}

.doc-keys span {
    height: 22px;
    border-radius: 3px;
    background: linear-gradient(to bottom, #dfddd7 0%, #9e978d 55%, #625b53 100%);
    border-top: 1px solid rgba(255,255,255,0.45);
    border-bottom: 1px solid rgba(0,0,0,0.55);
    border-left: 1px solid #222;
    border-right: 1px solid #111;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -2px 0 rgba(0,0,0,0.36);
}

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

/* ── 반응형 ── */
@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;
    }
}

/* =========================================
   doc-tab-bar — 패널 하단 탭
   ========================================= */

.doc-tab-bar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: stretch;
    gap: 3px;
    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: 20px;
    height: 20px;
    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-panel 내부 wikitable 리셋 ── */
.doc-panel table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

/* ── doc-panel 테이블 리셋 v2 ── */
.doc-panel table th,
.doc-panel table td {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* 인라인 style 배경 복원 허용 */
.doc-panel table th[style],
.doc-panel table td[style] {
    background: revert !important;
    border: revert !important;
    padding: revert !important;
}

@@ 1번째 줄: / 1번째 줄: @@
-@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(
-deg,
-        #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
+    Document View System — doc-*
+   기본 문서 시스템
     ========================================= */
-.crt-glitch-panel .vanishing-grid-bg {
+/* ── screen-body ── */
-    position: relative;
+.screen-body {
-    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 2px rgba(255,255,255,0.35),
-0 6px rgba(212,90,162,0.22),
-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 3px rgba(255,255,255,0.65),
-0 10px rgba(255,255,255,0.28),
-0 18px rgba(212,90,162,0.35),
-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 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 2px rgba(255,255,255,0.35),
-0 6px rgba(212,90,162,0.22),
-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 3px rgba(255,255,255,0.65),
-0 10px rgba(255,255,255,0.28),
-0 18px rgba(212,90,162,0.35),
-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 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),
-px 0 0 rgba(255,55,90,0.65),
-px 0 0 rgba(255,210,70,0.45),
-0 2px rgba(255,255,255,0.35),
-0 6px rgba(212,90,162,0.22),
-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),
-px 0 0 rgba(255,55,90,0.85),
-px 0 0 rgba(255,210,70,0.55),
-0 3px rgba(255,255,255,0.65),
-0 10px rgba(255,255,255,0.28),
-0 18px rgba(212,90,162,0.35),
-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 {
-%, 12%, 27%, 43%, 58%, 76%, 100% {
-        opacity: 0;
-        transform: translateY(100%);
-    }
-% {
-        opacity: 0.75;
-        transform: translateY(70%);
-    }
-% {
-        opacity: 0.15;
-        transform: translateY(62%) skewX(-2deg);
-    }
-% {
-        opacity: 0.55;
-        transform: translateY(35%);
-    }
-% {
-        opacity: 0.18;
-        transform: translateY(28%) skewX(2deg);
-    }
-% {
-        opacity: 0.65;
-        transform: translateY(10%);
-    }
-% {
-        opacity: 0.12;
-        transform: translateY(4%) skewX(-1deg);
-    }
-% {
-        opacity: 0.5;
-        transform: translateY(-20%);
-    }
-% {
-        opacity: 0.16;
-        transform: translateY(-26%) skewX(2deg);
-    }
-% {
-        opacity: 0.55;
-        transform: translateY(-55%);
-    }
-% {
-        opacity: 0;
-        transform: translateY(-70%);
-    }
-}
-@keyframes crt-base-drift {
-%, 88%, 100% {
-        transform: translateX(0);
-        filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
-    }
-% {
-        transform: translateX(-2px) skewX(-0.4deg);
-        filter:
-            contrast(1.08)
-            brightness(1.05)
-            drop-shadow(0 0 7px rgba(212,90,162,0.24));
-    }
-% {
-        transform: translateX(3px) skewX(0.5deg);
-    }
-% {
-        transform: translateX(-1px);
-    }
-% {
-        transform: translateX(0);
-        filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
-    }
-}
-@keyframes crt-wide-horizontal-tear {
-%, 8%, 17%, 29%, 43%, 61%, 78%, 100% {
-        opacity: 0;
-        transform: translateX(0);
-        clip-path: inset(0 0 0 0);
-    }
-% {
-        opacity: 0.45;
-        transform: translateX(-18px) skewX(-3deg);
-        clip-path: inset(18% 0 70% 0);
-    }
-% {
-        opacity: 0.28;
-        transform: translateX(24px) skewX(4deg);
-        clip-path: inset(21% 0 64% 0);
-    }
-% {
-        opacity: 0.38;
-        transform: translateX(32px) skewX(5deg);
-        clip-path: inset(42% 0 47% 0);
-    }
-% {
-        opacity: 0.16;
-        transform: translateX(-28px) skewX(-4deg);
-        clip-path: inset(46% 0 43% 0);
-    }
-% {
-        opacity: 0.48;
-        transform: translateX(-36px) skewX(-6deg);
-        clip-path: inset(58% 0 30% 0);
-    }
-% {
-        opacity: 0.18;
-        transform: translateX(20px) skewX(3deg);
-        clip-path: inset(61% 0 27% 0);
-    }
-% {
-        opacity: 0.36;
-        transform: translateX(18px) skewX(3deg);
-        clip-path: inset(8% 0 84% 0);
-    }
-% {
-        opacity: 0.12;
-        transform: translateX(-14px) skewX(-2deg);
-        clip-path: inset(11% 0 80% 0);
-    }
-% {
-        opacity: 0.44;
-        transform: translateX(-42px) skewX(-7deg);
-        clip-path: inset(73% 0 16% 0);
-    }
-% {
-        opacity: 0.18;
-        transform: translateX(30px) skewX(4deg);
-        clip-path: inset(76% 0 12% 0);
-    }
-% {
-        opacity: 0.42;
-        transform: translateX(26px) skewX(4deg);
-        clip-path: inset(31% 0 58% 0);
-    }
-% {
-        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:
-px 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;
-    }
-    to {
-        background-position:
-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 3px #050505,
-0 0 5px #242424,
-12px 20px rgba(0,0,0,0.62),
-24px 42px rgba(0,0,0,0.52),
-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(
-deg,
-            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),
-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 1px rgba(255,255,255,0.08),
-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(
-deg,
-            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;
+    width: calc(100% + 32px);
+    margin: 0 -16px 0 -16px;
+    padding: 4px 8px 4px 8px;
      box-sizing: border-box;
-    width: fit-content;
+     background: #101010;
-    max-width: 100%;
-    margin: 6px auto;
-    padding: 10px 14px;
-    border-radius: 10px;
-     background:
-        linear-gradient(
-deg,
-            #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 2px #050505,
-0 0 3px #242424,
-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(
-deg,
-            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,
-110%;
-    }
-    to {
-        background-position:
--32px,
--30%;
-    }
-}
-@keyframes compact-crt-static-flicker {
-%, 100% {
-        transform: translateX(0);
-        opacity: 0.26;
-    }
-% {
-        transform: translateX(-1px);
-        opacity: 0.36;
-    }
-% {
-        transform: translateX(1px);
-        opacity: 0.22;
-    }
-% {
-        transform: translateX(0);
-        opacity: 0.30;
-    }
-% {
-        transform: translateX(1px);
-        opacity: 0.38;
-    }
-% {
-        transform: translateX(-1px);
-        opacity: 0.24;
-    }
-% {
-        transform: translateX(0);
-        opacity: 0.32;
-    }
-% {
-        transform: translateX(-1px);
-        opacity: 0.40;
-    }
-% {
-        transform: translateX(0);
-        opacity: 0.26;
-    }
-}
-@keyframes compact-crt-image-jitter {
-%, 82%, 100% {
-        transform: translateX(0);
-    }
-% {
-        transform: translateX(-1px);
-    }
-% {
-        transform: translateX(1px);
-    }
-% {
-        transform: translateX(0);
-    }
-% {
-        transform: translateX(1px);
-    }
-% {
-        transform: translateX(-1px);
-    }
-% {
-        transform: translateX(0);
-    }
-}
-/* 관련 틀 상단 제목 */
-.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;
+         inset 0 -1px 0 #555,
+        inset 0 0 0 1px rgba(255,255,255,0.026),
+        inset 0 0 14px rgba(0,0,0,0.30);
+    border-top: 0;
+    overflow: visible;
+    isolation: isolate;
 }
-.related-template-title::before {
+.screen-body::before {
      content: "";
      position: absolute;
@@ 1,133번째 줄: / 28번째 줄: @@
      z-index: 1;
      pointer-events: none;
-    border-radius: inherit;
      background:
          linear-gradient(
@@ 1,154번째 줄: / 48번째 줄: @@
 }
-.related-template-title::after {
+.screen-body::after {
      content: "";
      position: absolute;
@@ 1,160번째 줄: / 54번째 줄: @@
      z-index: 2;
      pointer-events: none;
-    border-radius: inherit;
+     opacity: 0.16;
-     opacity: 0.20;
      background:
          repeating-linear-gradient(
@@ 1,171번째 줄: / 64번째 줄: @@
          );
      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}}
-번 인자: 양수면 좌측 이동
-번 인자: 양수면 아래 이동
-   ========================================= */
-.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(
-deg,
-            #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 3px #050505,
-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(
-deg,
-            #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 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 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(
-deg,
-            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 {
-%, 11%, 100% {
-        opacity: 0;
-        transform: translateX(0);
-        clip-path: inset(0 0 100% 0);
-    }
-% {
-        opacity: 0.38;
-        transform: translateX(-18px);
-        clip-path: inset(17% 0 78% 0);
-    }
-% {
-        opacity: 0.22;
-        transform: translateX(11px);
-        clip-path: inset(18% 0 77% 0);
-        filter: hue-rotate(-8deg);
-    }
-% {
-        opacity: 0;
-        transform: translateX(0);
-        clip-path: inset(0 0 100% 0);
-    }
-% {
-        opacity: 0.30;
-        transform: translateX(9px);
-        clip-path: inset(24% 0 70% 0);
-    }
-% {
-        opacity: 0;
-        transform: translateX(0);
-        clip-path: inset(0 0 100% 0);
-    }
-}
-@keyframes crt-slice-tear-b {
-%, 37%, 100% {
-        opacity: 0;
-        transform: translateX(0);
-        clip-path: inset(0 0 100% 0);
-    }
-% {
-        opacity: 0.42;
-        transform: translateX(24px);
-        clip-path: inset(43% 0 50% 0);
-    }
-% {
-        opacity: 0.26;
-        transform: translateX(-14px);
-        clip-path: inset(45% 0 48% 0);
-        filter: hue-rotate(10deg) brightness(1.08);
-    }
-% {
-        opacity: 0;
-        transform: translateX(0);
-        clip-path: inset(0 0 100% 0);
-    }
-% {
-        opacity: 0.34;
-        transform: translateX(-20px);
-        clip-path: inset(51% 0 43% 0);
-    }
-% {
-        opacity: 0;
-        transform: translateX(0);
-        clip-path: inset(0 0 100% 0);
-    }
-}
-@keyframes crt-slice-tear-c {
-%, 21%, 100% {
-        opacity: 0;
-        transform: translateX(0);
-        clip-path: inset(0 0 100% 0);
-    }
-% {
-        opacity: 0.28;
-        transform: translateX(-30px);
-        clip-path: inset(67% 0 25% 0);
-    }
-% {
-        opacity: 0.18;
-        transform: translateX(16px);
-        clip-path: inset(68% 0 23% 0);
-        filter: contrast(1.25) brightness(1.06);
-    }
-% {
-        opacity: 0;
-        transform: translateX(0);
-        clip-path: inset(0 0 100% 0);
-    }
-% {
-        opacity: 0.36;
-        transform: translateX(18px);
-        clip-path: inset(73% 0 18% 0);
-    }
-% {
-        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 {
-%, 52%, 100% {
-        opacity: 0;
-        transform: translateY(80%);
-    }
-% {
-        opacity: 0.42;
-        transform: translateY(36%);
-    }
-% {
-        opacity: 0.16;
-        transform: translateY(20%) skewX(-1deg);
-    }
-% {
-        opacity: 0;
-        transform: translateY(-20%);
-    }
-}
-@keyframes crt-soft-horizontal-tear {
-%, 68%, 100% {
-        opacity: 0;
-        transform: translateX(0);
-        clip-path: inset(0 0 0 0);
-    }
-% {
-        opacity: 0.32;
-        transform: translateX(-16px);
-        clip-path: inset(34% 0 58% 0);
-    }
-% {
-        opacity: 0.18;
-        transform: translateX(12px);
-        clip-path: inset(37% 0 55% 0);
-    }
-% {
-        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 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 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 4px color-mix(in srgb, var(--he-color) 34%, transparent),
-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:
-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 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: 8px 8px 4px 8px !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: 4px !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),
-1px 0 rgba(255,255,255,0.030),
--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(
-deg,
-            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:
--20px 32px rgba(0,0,0,0.86),
-12px 18px rgba(255,255,255,0.024),
-        -20px 0 32px rgba(0,0,0,0.78),
-px 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(
-deg,
-            #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 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(
-deg,
-            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:
-px 3px 0 rgba(0,0,0,0.98),
-0 6px rgba(0,0,0,0.98),
-0 14px rgba(0,0,0,0.95),
-0 26px rgba(0,0,0,0.92),
-        -1px 0 0 rgba(80,160,255,0.24),
-px 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;
-}
-/* =========================================
-   Document View System — doc-*
-   기본 문서 시스템
-   ========================================= */
-/* ── screen-body ── */
-.screen-body {
-    position: relative;
-    width: calc(100% + 32px);
-    margin: 0 -16px 0 -16px;
-    padding: 4px 8px 4px 8px;
-    box-sizing: border-box;
-    background: #171717;
-    box-shadow:
-        inset 1px 0 0 #494949,
-        inset 0 -1px 0 #555,
-        inset 0 2px 8px rgba(0,0,0,0.60);
-    border-top: 0;
-    overflow: visible;
 }
@@ 2,774번째 줄: / 89번째 줄: @@
      padding: 0 8px;
      box-sizing: border-box;
-    /* 금속 레일: 위가 밝고 아래가 어둡게 — 양각 */
+     background: #101010;
-     background:
+     border: 0;
-        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;
+    box-shadow:
+        inset 1px 0 0 #494949,
+        inset 0 -1px 0 #555,
+        inset 0 0 0 1px rgba(255,255,255,0.026),
+        inset 0 0 14px rgba(0,0,0,0.30);
+    overflow: hidden;
 }
-/* 레일 표면 사선 질감 */
 .doc-header::before {
      content: "";
@@ 2,795번째 줄: / 105번째 줄: @@
      inset: 0;
      pointer-events: none;
-     opacity: 0.06;
+     background:
-    background: repeating-linear-gradient(
+        linear-gradient(
-deg,
+            to bottom,
-        rgba(255,255,255,0.08) 0px,
+            rgba(255,255,255,0.070) 0%,
-         rgba(255,255,255,0.08) 1px,
+            rgba(255,255,255,0.026) 18%,
-        transparent 1px,
+            transparent 45%,
-        transparent 4px
+            rgba(0,0,0,0.18) 100%
-    );
+         ),
-     border-radius: inherit;
+        linear-gradient(
+deg,
+            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);
 }
@@ 2,834번째 줄: / 153번째 줄: @@
 }
-/* 나사 홈 (가로선) */
 .doc-screw::after {
      content: "";
@@ 2,918번째 줄: / 236번째 줄: @@
 /* =========================================
     doc-panel — 패널 공통
-    표면에 장착된 금속 모듈
+    표면 안쪽으로 들어간 유리 모듈
     ========================================= */
@@ 2,926번째 줄: / 244번째 줄: @@
      width: 100%;
      min-width: 0;
-    /* 패널 본체: 표면보다 살짝 밝음 */
+     background: #101010;
-     background: #1a1a1a;
+     border: 0;
-    /* 위: 밝은 하이라이트 / 아래: 어두운 그림자 — 양각 느낌 */
-    border-top: 1px solid #303030;
-     border-bottom: 1px solid #080808;
-    border-left: 1px solid #222;
-    border-right: 1px solid #111;
      border-radius: 2px;
      box-shadow:
          inset 1px 0 0 #494949,
          inset 0 -1px 0 #555,
-         inset 0 2px 6px rgba(0,0,0,0.55);
+         inset 0 0 0 1px rgba(255,255,255,0.026),
+        inset 0 0 14px rgba(0,0,0,0.30);
      overflow: hidden;
+    isolation: isolate;
 }
-/* 패널 모서리 나사 — 좌상단/우상단 */
 .doc-panel::before {
      content: "";
      position: absolute;
-     top: 4px;
+     inset: 0;
-     left: 4px;
+     z-index: 1;
-    width: 5px;
+     pointer-events: none;
-    height: 5px;
-     border-radius: 50%;
      background:
-         radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25) 0%, transparent 40%),
+         linear-gradient(
-         linear-gradient(145deg, #444 0%, #1e1e1e 100%);
+            to bottom,
-    border: 1px solid #080808;
+            rgba(255,255,255,0.070) 0%,
-     box-shadow: 0 0 0 1px #2a2a2a;
+            rgba(255,255,255,0.026) 18%,
-    pointer-events: none;
+            transparent 45%,
-    z-index: 10;
+            rgba(0,0,0,0.18) 100%
+        ),
+         linear-gradient(
+deg,
+            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);
 }
@@ 2,962번째 줄: / 285번째 줄: @@
      content: "";
      position: absolute;
-     top: 4px;
+     inset: 0;
-     right: 4px;
+     z-index: 2;
-     width: 5px;
+     pointer-events: none;
-     height: 5px;
+     opacity: 0.16;
-    border-radius: 50%;
      background:
-         radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25) 0%, transparent 40%),
+         repeating-linear-gradient(
-        linear-gradient(145deg, #444 0%, #1e1e1e 100%);
+            to bottom,
-    border: 1px solid #080808;
+            rgba(255,255,255,0.055) 0px,
-    box-shadow: 0 0 0 1px #2a2a2a;
+            rgba(255,255,255,0.055) 1px,
-     pointer-events: none;
+            transparent 2px,
-    z-index: 10;
+            transparent 4px
+        );
+     mix-blend-mode: screen;
 }
@@ 2,988번째 줄: / 312번째 줄: @@
      line-height: 1.2;
      letter-spacing: 0.10em;
-     color: #888;
+     color: #cfcfcf;
-     background: linear-gradient(to bottom, #161616 0%, #121212 100%);
+     background: linear-gradient(to bottom, #121212 0%, #0d0d0d 100%);
-     border-bottom: 1px solid #0d0d0d;
+     border-bottom: 1px solid rgba(133,67,105,0.42);
+    box-shadow:
+        inset 0 1px 0 rgba(255,255,255,0.035),
+        inset 0 -1px 0 rgba(0,0,0,0.58);
      text-shadow: 0 1px 0 rgba(0,0,0,0.80);
      text-transform: uppercase;
@@ 3,008번째 줄: / 335번째 줄: @@
      line-height: 1.8;
      color: #d8d8d8;
-    /* 디스플레이는 패널보다 어둡게 — 음각 화면 */
+     background: #0e0e0e;
-     background: #111111;
+     border-top: 1px solid #080808;
-     border-top: 1px solid #0a0a0a;
      box-shadow:
-         inset 0 2px 6px rgba(0,0,0,0.55),
+         inset 0 2px 6px rgba(0,0,0,0.60),
          inset 0 0 1px rgba(0,0,0,0.80);
 }
@@ 3,038번째 줄: / 364번째 줄: @@
 }
-/* doc-info-value: infobox-glass-value 동일 패턴 */
 .doc-info-value {
      position: relative;
@@ 3,097번째 줄: / 422번째 줄: @@
      line-height: 1.35;
      color: #666;
-    /* 버튼: 약간 양각 */
      background: linear-gradient(to bottom, #232323 0%, #1a1a1a 50%, #161616 100%);
      border-top: 1px solid #2e2e2e;
@@ 3,188번째 줄: / 512번째 줄: @@
 }
-/* 좌측 인디케이터 선 */
 .doc-link::before {
      content: "";
@@ 3,215번째 줄: / 538번째 줄: @@
 .doc-footer {
+    position: relative;
      display: grid;
      grid-template-columns: 1fr 110px 44px 110px 200px;
@@ 3,223번째 줄: / 547번째 줄: @@
      padding: 0 10px;
      box-sizing: border-box;
-     background: linear-gradient(to bottom, #282828 0%, #1a1a1a 40%, #161616 100%);
+     background: #101010;
      box-shadow:
          inset 1px 0 0 #494949,
          inset 0 -1px 0 #555,
-         inset 0 2px 6px rgba(0,0,0,0.55);
+         inset 0 0 0 1px rgba(255,255,255,0.026),
-     border-top: 1px solid #3a3a3a;
+        inset 0 0 14px rgba(0,0,0,0.30);
-    border-bottom: 1px solid #0a0a0a;
+     border: 0;
-    border-left: 1px solid #222;
-    border-right: 1px solid #222;
      border-radius: 2px;
+    overflow: hidden;
 }
-/* footer 표면 질감 */
 .doc-footer::before {
      content: "";
      position: absolute;
      inset: 0;
+    z-index: 1;
      pointer-events: none;
-     opacity: 0.05;
+     background:
-    background: repeating-linear-gradient(
+        linear-gradient(
-deg,
+            to bottom,
-        rgba(255,255,255,0.08) 0px,
+            rgba(255,255,255,0.070) 0%,
-         rgba(255,255,255,0.08) 1px,
+            rgba(255,255,255,0.026) 18%,
-         transparent 1px,
+            transparent 45%,
-        transparent 4px
+            rgba(0,0,0,0.18) 100%
-     );
+        ),
+        linear-gradient(
+deg,
+            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);
+}
+.doc-footer > * {
+    position: relative;
+     z-index: 2;
 }
@@ 3,264번째 줄: / 602번째 줄: @@
      border-top: 1px solid #080808;
      border-bottom: 1px solid #222;
+    border-left: 1px solid #111;
+    border-right: 1px solid #111;
      border-radius: 99px;
-     box-shadow: inset 0 1px 3px rgba(0,0,0,0.70);
+     box-shadow:
+        inset 0 1px 4px rgba(0,0,0,0.65),
+1px 0 rgba(255,255,255,0.018);
 }
-.doc-slider.short { width: 54px; }
+.doc-slider.short {
+    width: 52px;
+}
 .doc-slider::after {
      content: "";
      position: absolute;
-     top: -6px;
+     top: -5px;
-     left: 48%;
+     left: 52%;
-     width: 10px;
+     width: 9px;
-     height: 18px;
+     height: 16px;
      border-radius: 2px;
-     background: linear-gradient(to bottom, #c8c0b2 0%, #8a8278 100%);
+     background: linear-gradient(to bottom, #c8c0b2 0%, #6e675d 100%);
-     border-top: 1px solid #d8d0c2;
+     border: 1px solid #050505;
-    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),
+         inset 0 1px 0 rgba(255,255,255,0.40),
-1px 3px rgba(0,0,0,0.40);
+         inset 0 -1px 0 rgba(0,0,0,0.45);
 }
-/* doc-date: 날짜 readout */
 .doc-date {
-    box-sizing: border-box;
-    height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
-     font-size: 10px;
+    height: 24px;
+    box-sizing: border-box;
+     font-size: 11px;
      font-weight: 700;
-     letter-spacing: 0.12em;
+     letter-spacing: 0.08em;
-     color: #d45aa2;
+     color: #9eff72;
-     background: #0a0a0a;
+     background: linear-gradient(to bottom, #050805 0%, #020402 100%);
-    border-top: 1px solid #080808;
+     border: 1px solid #1d3317;
-    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);
+     box-shadow:
-     text-shadow: 0 0 8px rgba(212,90,162,0.40);
+        inset 0 0 10px rgba(100,220,80,0.10),
+0 6px rgba(100,220,80,0.08);
+     text-shadow:
+0 5px rgba(120,255,100,0.42),
+0 10px rgba(120,255,100,0.18);
 }
-/* doc-knob */
 .doc-knob {
      justify-self: center;
@@ 3,316번째 줄: / 656번째 줄: @@
      border-radius: 50%;
      background:
-         radial-gradient(circle at 36% 28%, rgba(255,255,255,0.30) 0%, transparent 24%),
+         radial-gradient(circle at 38% 30%, rgba(255,255,255,0.34) 0%, transparent 22%),
-         linear-gradient(145deg, #c8bfb0 0%, #8a8278 48%, #464039 100%);
+         linear-gradient(145deg, #d2c8b8 0%, #80786d 48%, #27231f 100%);
-     border: 1px solid #2a2520;
+     border: 1px solid #050505;
      box-shadow:
-         inset 0 1px 0 rgba(255,255,255,0.30),
+         inset 0 2px 0 rgba(255,255,255,0.42),
-         inset 0 -2px 0 rgba(0,0,0,0.22),
+         inset 0 -3px 0 rgba(0,0,0,0.58),
-2px 5px rgba(0,0,0,0.50);
+2px 6px rgba(0,0,0,0.50);
 }
-/* doc-keys */
 .doc-keys {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
-     gap: 5px;
+     gap: 7px;
 }
 .doc-keys span {
      height: 22px;
-     border-radius: 2px;
+     border-radius: 3px;
-     background: linear-gradient(to bottom, #d8d4ca 0%, #a09890 55%, #6e6660 100%);
+     background: linear-gradient(to bottom, #dfddd7 0%, #9e978d 55%, #625b53 100%);
-     border-top: 1px solid #e0dcd2;
+     border-top: 1px solid rgba(255,255,255,0.45);
-     border-bottom: 1px solid #1e1c18;
+     border-bottom: 1px solid rgba(0,0,0,0.55);
-     border-left: 1px solid #b8b0a8;
+     border-left: 1px solid #222;
-     border-right: 1px solid #4a4440;
+     border-right: 1px solid #111;
      box-shadow:
-         inset 0 1px 0 rgba(255,255,255,0.40),
+         inset 0 1px 0 rgba(255,255,255,0.45),
-1px 2px rgba(0,0,0,0.30);
+         inset 0 -2px 0 rgba(0,0,0,0.36);
 }
@@ 3,362번째 줄: / 701번째 줄: @@
          grid-template-columns: 210px minmax(0, 1fr);
      }
      .doc-layout-right {
          grid-column: 1 / -1;
@@ 3,368번째 줄: / 708번째 줄: @@
          gap: 7px;
      }
      .doc-footer {
          grid-template-columns: 1fr 110px 44px 110px;
      }
-     .doc-keys { display: none; }
+     .doc-keys {
+        display: none;
+    }
 }
@@ 3,380번째 줄: / 724번째 줄: @@
          grid-template-columns: 1fr;
      }
      .doc-footer {
          grid-template-columns: 1fr;
@@ 3,385번째 줄: / 730번째 줄: @@
          padding: 8px 10px;
      }
-    .doc-footer-sliders { justify-content: center; }
-    .doc-date, .doc-knob { justify-self: center; }
-}
-/* ── doc-tab-bar: 패널 하단 탭 ── */
+    .doc-footer-sliders {
-.doc-tab-bar {
+        justify-content: center;
-    position: relative;
+     }
-    z-index: 3;
-    display: flex;
-    gap: 3px;
-    padding: 6px 8px;
-    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 {
+    .doc-date,
-    box-sizing: border-box;
+     .doc-knob {
-    padding: 5px 14px;
+        justify-self: center;
-    font-size: 10px;
+     }
-    font-weight: 700;
-     letter-spacing: 0.08em;
-    color: #555;
-    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-shadow: 0 1px 0 rgba(0,0,0,0.80);
-    text-transform: uppercase;
-     user-select: none;
 }
-.doc-tab:hover {
+/* =========================================
-    color: #888;
+   doc-tab-bar — 패널 하단 탭
-    background: linear-gradient(to bottom, #242424 0%, #1a1a1a 100%);
+   ========================================= */
-    border-top-color: #333;
-}
-.doc-tab.active {
-    color: #e2e2e2;
-    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-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-tab-bar v2: 균등 분할 + Q/E 가이드 ── */
 .doc-tab-bar {
      position: relative;
@@ 3,454번째 줄: / 751번째 줄: @@
      align-items: stretch;
      gap: 3px;
-    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: 4px;
-    padding: 0 5px;
-    font-size: 9px;
-    font-weight: 700;
-    color: #333;
-    user-select: none;
-    white-space: nowrap;
-}
-.doc-tab-key kbd {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    font-size: 9px;
-    font-weight: 700;
-    font-family: inherit;
-    color: #555;
-    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.04);
-    text-shadow: 0 1px 0 rgba(0,0,0,0.80);
-}
-.doc-tab {
-    flex: 1;
-    box-sizing: border-box;
-    padding: 5px 4px;
-    font-size: 10px;
-    font-weight: 700;
-    letter-spacing: 0.06em;
-    color: #555;
-    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: #888;
-    background: linear-gradient(to bottom, #242424 0%, #1a1a1a 100%);
-    border-top-color: #333;
-}
-.doc-tab.active {
-    color: #e2e2e2;
-    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-tab-bar v3: 화살표 키 가이드 + 정렬 개선 ── */
-.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%);
@@ 3,646번째 줄: / 857번째 줄: @@
      border: revert !important;
      padding: revert !important;
-}
-/* ── doc-info-block: 카테고리 + 값 묶음 ── */
-.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);
 }