미디어위키:Template.Infobox.css

/* 인포박스 정당 */
.party-inner-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 0;
}

.party-inner-item {
    display: flex;
    align-items: center;
    gap: 7px;
    width: calc(100% + 8px);
    min-height: 18px;
    margin: 2px -4px;
    padding: 1px 9px;
    border-radius: 4px;
    background:
        linear-gradient(
            to bottom,
            #252525 0%,
            #1a1a1a 42%,
            #111111 100%
        );
    border: 1px solid #444;
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,0.10),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.55),
        0 1px 2px rgba(0,0,0,0.45);
    color: #fff;
    box-sizing: border-box;
}

.party-color-block {
    display: inline-block;
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border: 1px solid #fff;
    box-sizing: border-box;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.20),
        0 0 2px rgba(0,0,0,0.75);
}

.party-inner-name {
    display: inline-block;
    flex: 1;
    line-height: 1.35;
    color: #fff;
    white-space: normal;
}

.party-inner-date {
    display: inline-block;
    flex: 0 0 auto;
    margin-left: 10px;
    color: #7F7F7F;
    line-height: 1.35;
    white-space: nowrap;
}

/* IFP 정당 목록: 색상 박스 위치 보정 */
.party-inner-item > .party-color-block {
    position: relative;
    top: 1px;
}

/* 인포박스 기본 정보값 유리 커버 */
.infobox-glass-value {
    position: relative;
    top: -2px;
    overflow: hidden;
    text-align: left;
    border-radius: 5px;
    background: #101010;
    color: #fff;
    padding: 0 16px;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555;
}

.infobox-glass-value::before,
.infobox-glass-title::before,
.infobox-glass-party::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.070) 0%,
            rgba(255,255,255,0.026) 18%,
            transparent 45%,
            rgba(0,0,0,0.18) 100%
        ),
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0.045) 18%,
            transparent 36%,
            transparent 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.026),
        inset 0 0 14px rgba(0,0,0,0.30);
}

.infobox-glass-value::after,
.infobox-glass-title::after,
.infobox-glass-party::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.20;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.055) 0px,
            rgba(255,255,255,0.055) 1px,
            transparent 2px,
            transparent 4px
        );
    mix-blend-mode: screen;
}

.infobox-glass-value > *,
.infobox-glass-title > *,
.infobox-glass-party > * {
    position: relative;
    z-index: 3;
}

/* 인포박스 국명 / 국호 칸 */
.infobox-glass-title {
    position: relative;
    top: -2px;
    margin-top: 5px;
    overflow: hidden;
    text-align: center;
    border-radius: 5px;
    background: #101010;
    color: #fff;
    padding: 5px;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555;
}

/* 인포박스 기간 칸 */
.infobox-glass-period {
    position: relative;
    top: -2px;
    overflow: hidden;
    width: 290px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    background: #101010;
    color: #fff;
    padding: 0 16px;
    box-sizing: border-box;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555;
}

.infobox-glass-period::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.070) 0%,
            rgba(255,255,255,0.026) 18%,
            transparent 45%,
            rgba(0,0,0,0.18) 100%
        );
}

.infobox-glass-period::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.20;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.055) 0px,
            rgba(255,255,255,0.055) 1px,
            transparent 2px,
            transparent 4px
        );
    mix-blend-mode: screen;
}

.infobox-glass-period > * {
    position: relative;
    z-index: 3;
}

/* 인포박스 정당 목록용 값 칸 */
.infobox-glass-party {
    position: relative;
    top: -2px;
    overflow: hidden;
    text-align: left;
    border-radius: 5px;
    background: #101010;
    color: #fff;
    padding: 3px 10px;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555;
}

/* 인포박스 본체 텍스처 */
.clbi-infobox {
    border: 2px solid #1a1a1a !important;
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(255,255,255,0.030) 0%,
            transparent 24%
        ),
        radial-gradient(
            circle at 84% 88%,
            rgba(133,67,105,0.055) 0%,
            transparent 28%
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            transparent 1px,
            transparent 5px
        ),
        linear-gradient(
            to bottom,
            #202020 0%,
            #1a1a1a 48%,
            #121212 100%
        ) !important;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #525252,
        inset 0 0 18px rgba(0,0,0,0.35),
        0 0 0 3px #1A1A1A,
        0 0 0 5px #854369,
        0 4px 12px #000 !important;
    overflow: hidden;
}

/* 인포박스 본체 텍스처 */
.clbi-infobox {
    border: 2px solid #1a1a1a !important;
    background:
        radial-gradient(
            circle at 20% 12%,
            rgba(255,255,255,0.018) 0%,
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 88%,
            rgba(133,67,105,0.022) 0%,
            transparent 38%
        ),
        linear-gradient(
            to bottom,
            #1d1d1d 0%,
            #1a1a1a 52%,
            #161616 100%
        ) !important;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #525252,
        inset 0 0 16px rgba(0,0,0,0.28),
        0 0 0 3px #1A1A1A,
        0 0 0 5px #854369,
        0 4px 12px #000 !important;
    overflow: hidden;
}

/* 인포박스 임기 직책 제목 */
.infobox-glass-office {
    position: relative;
    top: -2px;
    overflow: hidden;
    text-align: center;
    border-radius: 5px;
    background: #101010;
    color: #fff;
    padding: 5px 16px 5px 16px;
    line-height: 1.35;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555;
}

.infobox-glass-office::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.070) 0%,
            rgba(255,255,255,0.026) 18%,
            transparent 45%,
            rgba(0,0,0,0.18) 100%
        ),
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0.045) 18%,
            transparent 36%,
            transparent 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.026),
        inset 0 0 14px rgba(0,0,0,0.30);
}

.infobox-glass-office::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.20;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.055) 0px,
            rgba(255,255,255,0.055) 1px,
            transparent 2px,
            transparent 4px
        );
    mix-blend-mode: screen;
}

.infobox-glass-office > * {
    position: relative;
    z-index: 3;
}

.infobox-glass-office-main {
    display: block;
    line-height: 1.25;
}

.infobox-glass-office-date {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.2;
    color: #7F7F7F;
    font-weight: normal;
}

/* 직위 계승 카드: 대수 / 이름 셀 */
.office-card-text-cell {
    position: relative;
    overflow: hidden;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
    background: #0c0c0c;
    color: #fff;
    text-align: center;
    line-height: 9pt;
    box-shadow:
        inset 0 -1px 0 #525252,
        0 0 0 3px #1A1A1A;
    padding: 5px;
    box-sizing: border-box;
}

.office-card-text-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.060) 0%,
            rgba(255,255,255,0.022) 18%,
            transparent 45%,
            rgba(0,0,0,0.18) 100%
        ),
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0.040) 18%,
            transparent 36%,
            transparent 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.024),
        inset 0 0 12px rgba(0,0,0,0.28);
}

.office-card-text-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.16;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.050) 0px,
            rgba(255,255,255,0.050) 1px,
            transparent 2px,
            transparent 4px
        );
    mix-blend-mode: screen;
}

.office-card-text-cell > * {
    position: relative;
    z-index: 3;
}

.office-card-rank-cell {
    margin-bottom: 5px;
    border-radius: 5px 5px 0 0;
}

.office-card-name-cell {
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 0 0 5px 5px;
}

/* =========================================
   Compact CRT Orthographic Variant
   ========================================= */

/* orthographic 이미지용 CRT 프레임 변형 */
.compact-crt-media.compact-crt-orthographic {
    --ortho-pad: 8px;
    --ortho-effect-inset: 2px;

    width: auto;
    max-width: none;
    padding: var(--ortho-pad);
    border-radius: 5px;
    line-height: 0;
    box-sizing: border-box;
}

/* orthographic 변형: 기존 유리 효과는 유지하고, 이미지보다 약간 바깥까지 적용 */
.compact-crt-media.compact-crt-orthographic::before {
    inset: var(--ortho-effect-inset);
    border-radius: 4px;
}

/* orthographic 변형: 기존 스캔라인/후처리 효과 범위 */
.compact-crt-media.compact-crt-orthographic::after {
    inset: var(--ortho-effect-inset);
    border-radius: 4px;
}

/* orthographic 변형: 기존 노이즈 레이어 범위 */
.compact-crt-media.compact-crt-orthographic .compact-crt-static {
    inset: var(--ortho-effect-inset);
    border-radius: 4px;
}

/* orthographic 변형: MediaWiki 파일 래퍼가 폭을 제한하지 않게 한다 */
.compact-crt-media.compact-crt-orthographic .mw-default-size,
.compact-crt-media.compact-crt-orthographic .mw-file-description,
.compact-crt-media.compact-crt-orthographic .mw-image-border,
.compact-crt-media.compact-crt-orthographic .mw-file-element,
.compact-crt-media.compact-crt-orthographic img {
    display: block;
    max-width: none;
}

/* orthographic 변형: 이미지는 파일 문법에서 지정한 크기를 따른다 */
.compact-crt-media.compact-crt-orthographic img {
    width: auto;
    height: auto;
}


/* =========================================
   OGB: 일반 텍스트용 색상 박스
   ========================================= */

.ogb-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    vertical-align: middle;
    line-height: 1.35;
}

.ogb-inline .party-color-block {
    position: relative;
    top: -1px;
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
}

.ogb-text {
    display: inline-block;
    position: relative;
    top: -2px;
    color: inherit;
}


/* =========================================
   Orthographic Infobox Legend
   ========================================= */

/* 인포박스 orthographic 설명 / 범례 칸 */
.infobox-glass-orthographic {
    position: relative;
    top: -2px;
    overflow: hidden;
    width: 290px;
    min-height: 25px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    background: #101010;
    color: #fff;
    padding: 5px 16px;
    text-align: center;
    font-weight: normal;
    line-height: 1.45;
    box-sizing: border-box;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555;
}

.infobox-glass-orthographic::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.070) 0%,
            rgba(255,255,255,0.026) 18%,
            transparent 45%,
            rgba(0,0,0,0.18) 100%
        );
}

.infobox-glass-orthographic::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.20;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.055) 0px,
            rgba(255,255,255,0.055) 1px,
            transparent 2px,
            transparent 4px
        );
    mix-blend-mode: screen;
}

.infobox-glass-orthographic > * {
    position: relative;
    z-index: 3;
    font-weight: normal;
}

/* orthographic 범례: 묶음 전체는 가운데 배치, 내부 항목은 같은 왼쪽선에 맞춘다 */
.orthographic-legend-list {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    text-align: left;
    gap: 2px;
}

/* orthographic 범례 안의 OGB 항목은 묶음 폭 전체를 사용한다 */
.orthographic-legend-list .ogb-inline {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
}

/* =========================================
   Infobox Glass Split Value
   양쪽 병렬 값 박스
   ========================================= */

.infobox-glass-split {
    display: flex;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.infobox-glass-split-box {
    position: relative;
    top: -2px;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    border-radius: 5px;
    background: #101010;
    color: #fff;
    padding: 6px 10px;
    box-sizing: border-box;
    line-height: 1.55;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555;
}

.infobox-glass-split-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.070) 0px,
            rgba(255,255,255,0.034) 18px,
            rgba(255,255,255,0.014) 52px,
            rgba(255,255,255,0.004) 110px,
            transparent 170px,
            transparent calc(100% - 130px),
            rgba(0,0,0,0.035) calc(100% - 70px),
            rgba(0,0,0,0.12) 100%
        ),
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0.036) 12%,
            rgba(255,255,255,0.018) 22%,
            transparent 38%,
            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);
}

.infobox-glass-split-box::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.20;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.055) 0px,
            rgba(255,255,255,0.055) 1px,
            transparent 2px,
            transparent 4px
        );
    mix-blend-mode: screen;
}

.infobox-glass-split-box > * {
    position: relative;
    z-index: 3;
}