편집 요약 없음 |
편집 요약 없음 |
||
| 1,560번째 줄: | 1,560번째 줄: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
width: 100%; | width: 100%; | ||
aspect-ratio: 2560 / | aspect-ratio: 2560 / 580; | ||
margin: 0 auto 16px auto; | margin: 0 auto 16px auto; | ||
padding: 14px 20px 16px 20px; | padding: 14px 20px 16px 20px; | ||
2026년 4월 26일 (일) 18:13 판
/* Proitem 애니메이션 */
.wip-stripe-layer {
position: absolute;
top: 0;
left: -280px;
width: calc(100% + 560px);
height: 100%;
opacity: 0.08;
background: repeating-linear-gradient(
45deg,
#969696,
#969696 10px,
transparent 10px,
transparent 20px
);
z-index: 0;
}
.wip-active .wip-stripe-layer {
animation: wip-stripe-move 8s linear infinite;
}
.wip-standby .wip-stripe-layer {
animation: none;
}
@keyframes wip-stripe-move {
from { transform: translateX(0); }
to { transform: translateX(280px); }
}
/* 펼접 */
[id^="collapsible"] {
overflow: hidden;
transition: max-height .25s ease;
max-height: 0;
}
/* Color */
.color-text {
color: var(--text-color);
}
.color-text a,
.color-text a:visited,
.color-text a:hover,
.color-text a:active {
color: var(--text-color) !important;
text-decoration-color: var(--text-color) !important;
}
/* =========================================
CRT Glitch Panel
========================================= */
.crt-glitch-panel .vanishing-grid-bg {
position: relative;
overflow: hidden;
border-radius: 5px;
background:
radial-gradient(circle at 50% 45%, rgba(212,90,162,0.18) 0%, transparent 32%),
linear-gradient(to bottom, #111 0%, #090909 58%, #030303 100%) !important;
}
/* 실제 내용 */
.crt-glitch-panel > * {
position: relative;
z-index: 2;
}
/* 빛 번짐 대상 */
.crt-glow-content {
position: relative;
z-index: 2;
text-shadow:
0 0 2px rgba(255,255,255,0.35),
0 0 6px rgba(212,90,162,0.22),
0 0 12px rgba(133,67,105,0.18);
filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
}
/* 안개 낀 빛 번짐 */
.crt-glow-content::before {
content: "";
position: absolute;
inset: -24px;
z-index: -1;
pointer-events: none;
background:
radial-gradient(
circle at 50% 35%,
rgba(255,255,255,0.08) 0%,
rgba(212,90,162,0.10) 18%,
rgba(133,67,105,0.08) 34%,
transparent 68%
);
filter: blur(18px);
opacity: 0.75;
}
/* 제목류 발광 */
.crt-glitch-panel .fake-h1,
.crt-glitch-panel h1,
.crt-glitch-panel h2,
.crt-glitch-panel strong {
text-shadow:
0 0 3px rgba(255,255,255,0.65),
0 0 10px rgba(255,255,255,0.28),
0 0 18px rgba(212,90,162,0.35),
0 0 32px rgba(133,67,105,0.24);
}
/* 위로 올라가는 CRT 가로선 */
.crt-glitch-panel::before {
content: "";
position: absolute;
inset: -80px 0;
z-index: 3;
pointer-events: none;
opacity: 0.22;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 1px,
transparent 2px,
transparent 5px
);
mix-blend-mode: screen;
animation: crt-scanlines-up 7s linear infinite;
}
/* 위로 지나가는 글리치 빛줄 */
.crt-glitch-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
to bottom,
transparent 0%,
rgba(255,255,255,0.18) 48%,
rgba(212,90,162,0.28) 50%,
rgba(90,120,255,0.16) 52%,
transparent 56%
);
mix-blend-mode: screen;
animation: crt-glitch-band-up 6.5s steps(1, end) infinite;
}
/* =========================================
CRT Glitch Panel
========================================= */
.crt-glitch-panel {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: 5px;
box-shadow:
inset 0 0 18px rgba(255,255,255,0.04),
inset 0 0 42px rgba(133,67,105,0.10),
0 0 18px rgba(133,67,105,0.20);
}
/* 실제 내용 */
.crt-glitch-panel > * {
position: relative;
z-index: 2;
}
/* 빛 번짐 대상 */
.crt-glow-content {
position: relative;
z-index: 2;
text-shadow:
0 0 2px rgba(255,255,255,0.35),
0 0 6px rgba(212,90,162,0.22),
0 0 12px rgba(133,67,105,0.18);
filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
}
/* 안개 낀 빛 번짐 */
.crt-glow-content::before {
content: "";
position: absolute;
inset: -24px;
z-index: -1;
pointer-events: none;
background:
radial-gradient(
circle at 50% 35%,
rgba(255,255,255,0.08) 0%,
rgba(212,90,162,0.10) 18%,
rgba(133,67,105,0.08) 34%,
transparent 68%
);
filter: blur(18px);
opacity: 0.75;
}
/* 제목류 발광 */
.crt-glitch-panel .fake-h1,
.crt-glitch-panel h1,
.crt-glitch-panel h2,
.crt-glitch-panel strong {
text-shadow:
0 0 3px rgba(255,255,255,0.65),
0 0 10px rgba(255,255,255,0.28),
0 0 18px rgba(212,90,162,0.35),
0 0 32px rgba(133,67,105,0.24);
}
/* 위로 올라가는 CRT 가로선 */
.crt-glitch-panel::before {
content: "";
position: absolute;
inset: -80px 0;
z-index: 3;
pointer-events: none;
opacity: 0.22;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 1px,
transparent 2px,
transparent 5px
);
mix-blend-mode: screen;
animation: crt-scanlines-up 7s linear infinite;
}
/* 위로 지나가는 글리치 빛줄 */
.crt-glitch-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
to bottom,
transparent 0%,
rgba(255,255,255,0.18) 48%,
rgba(212,90,162,0.28) 50%,
rgba(90,120,255,0.16) 52%,
transparent 56%
);
mix-blend-mode: screen;
animation: crt-glitch-band-up 6.5s steps(1, end) infinite;
}
/* =========================================
CRT Glitch Panel
========================================= */
.crt-glitch-panel {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: 5px;
box-shadow:
inset 0 0 18px rgba(255,255,255,0.04),
inset 0 0 42px rgba(133,67,105,0.10),
0 0 18px rgba(133,67,105,0.20);
}
/* 실제 내용 */
.crt-glitch-panel > * {
position: relative;
z-index: 2;
}
/* 빛 번짐 + RGB split 대상 */
.crt-glow-content {
position: relative;
z-index: 2;
text-shadow:
-1px 0 0 rgba(80,160,255,0.75),
1px 0 0 rgba(255,55,90,0.65),
2px 0 0 rgba(255,210,70,0.45),
0 0 2px rgba(255,255,255,0.35),
0 0 6px rgba(212,90,162,0.22),
0 0 12px rgba(133,67,105,0.18);
filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
}
/* 안개 낀 빛 번짐 */
.crt-glow-content::before {
content: "";
position: absolute;
inset: -24px;
z-index: -1;
pointer-events: none;
background:
radial-gradient(
circle at 50% 35%,
rgba(255,255,255,0.08) 0%,
rgba(212,90,162,0.10) 18%,
rgba(133,67,105,0.08) 34%,
transparent 68%
);
filter: blur(18px);
opacity: 0.75;
}
/* 제목류 발광 + 더 강한 RGB split */
.crt-glitch-panel .fake-h1,
.crt-glitch-panel h1,
.crt-glitch-panel h2,
.crt-glitch-panel strong {
text-shadow:
-1px 0 0 rgba(80,160,255,0.95),
1px 0 0 rgba(255,55,90,0.85),
2px 0 0 rgba(255,210,70,0.55),
0 0 3px rgba(255,255,255,0.65),
0 0 10px rgba(255,255,255,0.28),
0 0 18px rgba(212,90,162,0.35),
0 0 32px rgba(133,67,105,0.24);
}
/* 이미지 외곽 RGB split + 약한 발광 */
.crt-glitch-panel img {
filter:
drop-shadow(-1px 0 0 rgba(80,160,255,0.65))
drop-shadow(1px 0 0 rgba(255,55,90,0.55))
drop-shadow(2px 0 0 rgba(255,210,70,0.35))
drop-shadow(0 0 6px rgba(212,90,162,0.18));
}
/* 위로 올라가는 CRT 가로선 */
.crt-glitch-panel::before {
content: "";
position: absolute;
inset: -80px 0;
z-index: 3;
pointer-events: none;
opacity: 0.22;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 1px,
transparent 2px,
transparent 5px
);
mix-blend-mode: screen;
animation: crt-scanlines-up 7s linear infinite;
}
/* 위로 지나가는 글리치 빛줄 */
.crt-glitch-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
to bottom,
transparent 0%,
rgba(255,255,255,0.18) 48%,
rgba(212,90,162,0.28) 50%,
rgba(90,120,255,0.16) 52%,
transparent 56%
);
mix-blend-mode: screen;
animation: crt-glitch-band-up 6.5s steps(1, end) infinite;
}
/* =========================================
Horizontal CRT Warp
========================================= */
.crt-horizontal-warp {
position: relative;
overflow: hidden;
isolation: isolate;
}
/* 내용물 자체의 약한 신호 흔들림 + 얇은 수평 노이즈 */
.crt-horizontal-warp .crt-glow-content {
animation: crt-base-drift 9s steps(1, end) infinite;
background-image:
repeating-linear-gradient(
to bottom,
rgba(120,180,255,0.00) 0px,
rgba(120,180,255,0.00) 3px,
rgba(120,180,255,0.05) 4px,
rgba(255,80,170,0.035) 5px,
rgba(120,180,255,0.00) 7px
);
background-blend-mode: screen;
}
/* 수평 찢김 레이어 */
.crt-horizontal-warp .crt-glow-content::after {
content: "";
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
to right,
transparent 0%,
rgba(120,180,255,0.18) 10%,
rgba(255,255,255,0.18) 48%,
rgba(212,90,162,0.20) 78%,
transparent 100%
);
mix-blend-mode: screen;
animation: crt-wide-horizontal-tear 3.8s steps(1, end) infinite;
}
/* =========================================
Animations
========================================= */
@keyframes crt-scanlines-up {
from {
transform: translateY(0);
}
to {
transform: translateY(-72px);
}
}
@keyframes crt-glitch-band-up {
0%, 12%, 27%, 43%, 58%, 76%, 100% {
opacity: 0;
transform: translateY(100%);
}
13% {
opacity: 0.75;
transform: translateY(70%);
}
14% {
opacity: 0.15;
transform: translateY(62%) skewX(-2deg);
}
28% {
opacity: 0.55;
transform: translateY(35%);
}
29% {
opacity: 0.18;
transform: translateY(28%) skewX(2deg);
}
44% {
opacity: 0.65;
transform: translateY(10%);
}
45% {
opacity: 0.12;
transform: translateY(4%) skewX(-1deg);
}
59% {
opacity: 0.5;
transform: translateY(-20%);
}
60% {
opacity: 0.16;
transform: translateY(-26%) skewX(2deg);
}
77% {
opacity: 0.55;
transform: translateY(-55%);
}
78% {
opacity: 0;
transform: translateY(-70%);
}
}
@keyframes crt-base-drift {
0%, 88%, 100% {
transform: translateX(0);
filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
}
89% {
transform: translateX(-2px) skewX(-0.4deg);
filter:
contrast(1.08)
brightness(1.05)
drop-shadow(0 0 7px rgba(212,90,162,0.24));
}
90% {
transform: translateX(3px) skewX(0.5deg);
}
91% {
transform: translateX(-1px);
}
92% {
transform: translateX(0);
filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
}
}
@keyframes crt-wide-horizontal-tear {
0%, 8%, 17%, 29%, 43%, 61%, 78%, 100% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 0 0);
}
9% {
opacity: 0.45;
transform: translateX(-18px) skewX(-3deg);
clip-path: inset(18% 0 70% 0);
}
10% {
opacity: 0.28;
transform: translateX(24px) skewX(4deg);
clip-path: inset(21% 0 64% 0);
}
18% {
opacity: 0.38;
transform: translateX(32px) skewX(5deg);
clip-path: inset(42% 0 47% 0);
}
19% {
opacity: 0.16;
transform: translateX(-28px) skewX(-4deg);
clip-path: inset(46% 0 43% 0);
}
30% {
opacity: 0.48;
transform: translateX(-36px) skewX(-6deg);
clip-path: inset(58% 0 30% 0);
}
31% {
opacity: 0.18;
transform: translateX(20px) skewX(3deg);
clip-path: inset(61% 0 27% 0);
}
44% {
opacity: 0.36;
transform: translateX(18px) skewX(3deg);
clip-path: inset(8% 0 84% 0);
}
45% {
opacity: 0.12;
transform: translateX(-14px) skewX(-2deg);
clip-path: inset(11% 0 80% 0);
}
62% {
opacity: 0.44;
transform: translateX(-42px) skewX(-7deg);
clip-path: inset(73% 0 16% 0);
}
63% {
opacity: 0.18;
transform: translateX(30px) skewX(4deg);
clip-path: inset(76% 0 12% 0);
}
79% {
opacity: 0.42;
transform: translateX(26px) skewX(4deg);
clip-path: inset(31% 0 58% 0);
}
80% {
opacity: 0.14;
transform: translateX(-20px) skewX(-3deg);
clip-path: inset(34% 0 54% 0);
}
}
/* =========================================
Retro Horizon Grid Background
========================================= */
.retro-grid-bg {
position: relative;
overflow: hidden;
border-radius: 5px;
background:
linear-gradient(
to bottom,
rgba(13, 6, 19, 0.98) 0%,
rgba(25, 9, 33, 0.82) 44%,
rgba(53, 19, 56, 0.50) 60%,
rgba(4, 4, 7, 0.96) 61%,
rgba(2, 2, 4, 1) 100%
) !important;
}
/* 본문은 배경 위 */
.retro-grid-bg .crt-glow-content {
position: relative;
z-index: 5;
}
/* 지평선 발광 */
.retro-grid-bg::before {
content: "";
position: absolute;
left: -10%;
right: -10%;
top: 56%;
height: 16%;
z-index: 1;
pointer-events: none;
background:
radial-gradient(
ellipse at 50% 50%,
rgba(230,210,225,0.28) 0%,
rgba(204,94,168,0.30) 20%,
rgba(184,56,142,0.20) 44%,
transparent 76%
);
filter: blur(9px);
opacity: 0.68;
}
/* 지평선에서 아래로 펼쳐지는 바닥 그리드 */
.retro-grid-bg::after {
content: "";
position: absolute;
left: 50%;
top: 61%;
width: 150%;
height: 115%;
z-index: 2;
pointer-events: none;
background-image:
linear-gradient(
to right,
rgba(204,64,156,0.72) 1px,
transparent 1px
),
linear-gradient(
to bottom,
rgba(204,64,156,0.70) 1px,
transparent 1px
);
background-size:
48px 100%,
100% 26px;
transform-origin: 50% 0%;
transform:
translateX(-50%)
perspective(430px)
rotateX(66deg);
opacity: 0.78;
filter:
drop-shadow(0 0 3px rgba(204,64,156,0.58))
drop-shadow(0 0 10px rgba(204,64,156,0.30));
animation: retro-grid-flow 1.8s linear infinite;
mask-image:
linear-gradient(
to bottom,
transparent 0%,
black 4%,
black 82%,
transparent 100%
);
-webkit-mask-image:
linear-gradient(
to bottom,
transparent 0%,
black 4%,
black 82%,
transparent 100%
);
}
/* 중앙 안개빛 */
.retro-grid-bg .crt-glow-content::before {
content: "";
position: absolute;
inset: -42px;
z-index: -1;
pointer-events: none;
background:
radial-gradient(
ellipse at 50% 56%,
rgba(220,220,225,0.05) 0%,
rgba(204,64,156,0.07) 22%,
rgba(96,152,204,0.05) 42%,
transparent 70%
);
filter: blur(20px);
opacity: 0.52;
}
/* 가로선만 지평선 방향으로 흐르게 함 */
@keyframes retro-grid-flow {
from {
background-position:
0 0,
0 0;
}
to {
background-position:
0 0,
0 -26px;
}
}
/* =========================================
CRT Monitor Frame
========================================= */
.crt-monitor-frame {
position: relative;
box-sizing: border-box;
padding: 34px 46px 38px 46px;
border-radius: 22px;
background:
linear-gradient(145deg, #303030 0%, #181818 22%, #080808 58%, #202020 100%);
border: 2px solid #2f2f2f;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.18),
inset 0 -3px 0 rgba(0,0,0,0.85),
inset 3px 0 0 rgba(255,255,255,0.06),
inset -3px 0 0 rgba(0,0,0,0.75),
0 0 0 3px #050505,
0 0 0 5px #242424,
0 12px 20px rgba(0,0,0,0.62),
0 24px 42px rgba(0,0,0,0.52),
0 42px 70px rgba(0,0,0,0.34);
}
/* 플라스틱 표면의 약한 질감 */
.crt-monitor-frame::before {
content: "";
position: absolute;
inset: 0;
border-radius: 22px;
pointer-events: none;
opacity: 0.16;
background:
repeating-linear-gradient(
135deg,
rgba(255,255,255,0.035) 0px,
rgba(255,255,255,0.035) 1px,
transparent 1px,
transparent 5px
),
radial-gradient(
ellipse at 28% 12%,
rgba(255,255,255,0.12) 0%,
transparent 45%
);
mix-blend-mode: screen;
}
/* 오른쪽 로고/패널 느낌 */
.crt-monitor-frame::after {
content: none;
}
/* 화면 주변의 깊게 파인 안쪽 홈 */
.crt-monitor-inner {
position: relative;
box-sizing: border-box;
padding: 18px;
border-radius: 16px;
background:
linear-gradient(145deg, #050505 0%, #111 44%, #070707 100%);
border: 1px solid #050505;
box-shadow:
inset 0 5px 14px rgba(0,0,0,0.95),
inset 0 -2px 4px rgba(255,255,255,0.06),
inset 4px 0 10px rgba(0,0,0,0.85),
inset -4px 0 10px rgba(0,0,0,0.85),
0 1px 0 rgba(255,255,255,0.12);
}
/* 실제 화면 테두리 */
.crt-monitor-screen {
position: relative;
overflow: hidden;
border-radius: 9px / 18px;
background: #050505;
border: 2px solid #050505;
box-shadow:
inset 0 0 0 2px #151515,
inset 0 0 22px rgba(0,0,0,0.95),
inset 0 0 48px rgba(0,0,0,0.75),
0 0 0 1px rgba(255,255,255,0.08),
0 0 18px rgba(133,67,105,0.18);
}
/* CRT 유리 곡면 느낌 */
.crt-monitor-screen::before {
content: "";
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
border-radius: 9px / 18px;
background:
radial-gradient(
ellipse at 50% 50%,
transparent 0%,
transparent 58%,
rgba(0,0,0,0.22) 82%,
rgba(0,0,0,0.58) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.05) 18%,
transparent 38%,
transparent 100%
);
box-shadow:
inset 0 0 28px rgba(255,255,255,0.04),
inset 0 0 60px rgba(0,0,0,0.65);
}
/* 기존 화면 효과가 프레임 안에서 꽉 차도록 보정 */
.crt-monitor-screen .crt-glitch-panel,
.crt-monitor-screen .retro-grid-bg {
border-radius: 8px / 16px;
}
.crt-monitor-screen .crt-glitch-panel {
box-shadow: none;
}
/* CRT 밖으로 빼기 */
#clbi-main-crt-hero-wrap {
width: 100%;
margin: 0 auto 14px auto;
}
#clbi-main-crt-hero {
width: 100%;
}
/* =========================================
Compact CRT Media Frame
flag / coat of arms display
========================================= */
.compact-crt-media {
position: relative;
box-sizing: border-box;
width: fit-content;
max-width: 100%;
margin: 6px auto;
padding: 10px 14px;
border-radius: 10px;
background:
linear-gradient(
145deg,
#242424 0%,
#141414 34%,
#070707 70%,
#171717 100%
);
border: 1px solid #2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
inset 0 -2px 0 rgba(0,0,0,0.82),
inset 2px 0 0 rgba(255,255,255,0.035),
inset -2px 0 0 rgba(0,0,0,0.62),
0 0 0 2px #050505,
0 0 0 3px #242424,
0 4px 12px rgba(0,0,0,0.68);
overflow: hidden;
}
/* 실제 이미지: 화면 안쪽, 유리 레이어 아래 */
.compact-crt-media .mw-default-size,
.compact-crt-media .mw-file-element,
.compact-crt-media img {
position: relative;
z-index: 1;
}
.compact-crt-media img {
max-width: 100%;
height: auto;
filter:
drop-shadow(0 1px 3px rgba(0,0,0,0.72))
drop-shadow(0 0 4px rgba(255,255,255,0.06));
animation: compact-crt-image-jitter 1.25s steps(1, end) infinite;
}
/* 안쪽 유리 음영: 이미지 위에 깔림 */
.compact-crt-media::before {
content: "";
position: absolute;
inset: 6px;
z-index: 3;
border-radius: 7px;
pointer-events: none;
background:
radial-gradient(
ellipse at 50% 50%,
transparent 0%,
transparent 54%,
rgba(0,0,0,0.20) 78%,
rgba(0,0,0,0.58) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.040) 18%,
transparent 38%,
transparent 100%
),
linear-gradient(
to bottom,
rgba(255,255,255,0.030) 0%,
transparent 34%,
rgba(0,0,0,0.26) 100%
);
box-shadow:
inset 0 0 18px rgba(255,255,255,0.028),
inset 0 0 38px rgba(0,0,0,0.66);
}
/* 스캔라인 */
.compact-crt-media::after {
content: "";
position: absolute;
inset: 6px;
z-index: 4;
border-radius: 7px;
pointer-events: none;
opacity: 0.34;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0px,
rgba(255,255,255,0.070) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}
/* 얇은 치직 노이즈 */
.compact-crt-static {
position: absolute;
inset: 6px;
z-index: 5;
border-radius: 7px;
pointer-events: none;
opacity: 0.30;
background:
repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 4px,
rgba(255,255,255,0.10) 5px,
transparent 6px,
transparent 10px
),
linear-gradient(
to bottom,
transparent 0%,
transparent 43%,
rgba(255,255,255,0.11) 49%,
rgba(180,180,180,0.08) 50%,
rgba(90,90,90,0.08) 51%,
transparent 56%,
transparent 100%
);
mix-blend-mode: screen;
animation:
compact-crt-static-roll 3.8s linear infinite,
compact-crt-static-flicker 1.7s steps(1, end) infinite;
}
.compact-crt-media:hover::after {
opacity: 0.40;
}
.compact-crt-media:hover .compact-crt-static {
opacity: 0.36;
}
.compact-crt-media:hover img {
filter:
drop-shadow(0 1px 3px rgba(0,0,0,0.78))
drop-shadow(0 0 5px rgba(255,255,255,0.08));
}
@keyframes compact-crt-static-roll {
from {
background-position:
0 0,
0 110%;
}
to {
background-position:
0 -32px,
0 -30%;
}
}
@keyframes compact-crt-static-flicker {
0%, 100% {
transform: translateX(0);
opacity: 0.26;
}
11% {
transform: translateX(-1px);
opacity: 0.36;
}
12% {
transform: translateX(1px);
opacity: 0.22;
}
36% {
transform: translateX(0);
opacity: 0.30;
}
37% {
transform: translateX(1px);
opacity: 0.38;
}
38% {
transform: translateX(-1px);
opacity: 0.24;
}
64% {
transform: translateX(0);
opacity: 0.32;
}
65% {
transform: translateX(-1px);
opacity: 0.40;
}
66% {
transform: translateX(0);
opacity: 0.26;
}
}
@keyframes compact-crt-image-jitter {
0%, 82%, 100% {
transform: translateX(0);
}
83% {
transform: translateX(-1px);
}
84% {
transform: translateX(1px);
}
85% {
transform: translateX(0);
}
92% {
transform: translateX(1px);
}
93% {
transform: translateX(-1px);
}
94% {
transform: translateX(0);
}
}
/* 인포박스 정당 */
.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;
}
/* 인포박스 기본 정보값 유리 커버 */
.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: 250px;
height: 25px;
border-radius: 5px;
background: #101010;
color: #fff;
padding: 0 16px;
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;
}
/* 관련 틀 상단 제목 */
.related-template-title {
position: relative;
overflow: hidden;
width: 100%;
border-radius: 5px;
background: #101010;
color: #fff;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555;
}
.related-template-title::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0%,
rgba(255,255,255,0.026) 18%,
transparent 45%,
rgba(0,0,0,0.18) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.045) 18%,
transparent 36%,
transparent 100%
);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
}
.related-template-title::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: inherit;
opacity: 0.20;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.055) 0px,
rgba(255,255,255,0.055) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}
.related-template-title > * {
position: relative;
z-index: 3;
}
/* =========================================
Page Top CRT Banner
recessed / built-in screen + CRT slice tear + chromatic bleed
Template use:
{{Banner|[[파일:example.png{{!}}link=]]|80px|20px}}
2번 인자: 양수면 좌측 이동
3번 인자: 양수면 아래 이동
========================================= */
.crt-page-monitor-frame {
position: relative;
box-sizing: border-box;
width: 100%;
aspect-ratio: 2560 / 580;
margin: 0 auto 16px auto;
padding: 14px 20px 16px 20px;
border-radius: 18px;
background:
linear-gradient(
145deg,
#151515 0%,
#0b0b0b 28%,
#050505 58%,
#181818 100%
);
border: 2px solid #242424;
box-shadow:
inset 0 3px 8px rgba(0,0,0,0.78),
inset 0 -2px 0 rgba(255,255,255,0.030),
inset 4px 0 10px rgba(0,0,0,0.72),
inset -3px 0 0 rgba(0,0,0,0.78),
0 0 0 3px #050505,
0 0 0 5px #242424;
overflow: hidden;
}
/* 좌측 상단 엠보싱 억제 */
.crt-page-monitor-frame::before {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
pointer-events: none;
opacity: 0.08;
background:
linear-gradient(
to bottom,
rgba(0,0,0,0.38) 0%,
transparent 20%,
transparent 100%
),
linear-gradient(
to right,
rgba(0,0,0,0.34) 0%,
transparent 18%,
transparent 100%
);
mix-blend-mode: normal;
}
.crt-page-monitor-frame::after {
content: none;
}
/* 화면이 들어가는 안쪽 홈 */
.crt-page-monitor-inner {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 12px;
border-radius: 13px;
background:
linear-gradient(
145deg,
#020202 0%,
#080808 45%,
#030303 100%
);
border: 1px solid #020202;
box-shadow:
inset 0 11px 24px rgba(0,0,0,0.98),
inset 0 -2px 3px rgba(255,255,255,0.028),
inset 8px 0 20px rgba(0,0,0,0.94),
inset -8px 0 20px rgba(0,0,0,0.94),
0 0 0 1px rgba(255,255,255,0.030);
}
/* 실제 화면 */
.crt-page-monitor-screen {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 8px / 15px;
background: #050505;
border: 1px solid #060606;
box-shadow:
inset 0 0 18px rgba(0,0,0,0.88),
inset 0 0 42px rgba(0,0,0,0.70),
0 0 0 1px rgba(255,255,255,0.026);
}
/* 배너 이미지 전체 컨테이너 */
.crt-page-monitor-image {
position: absolute;
inset: 0;
z-index: 1;
line-height: 0;
overflow: hidden;
}
/* 기본 이미지는 고정 */
.crt-page-monitor-image-base {
position: absolute;
inset: 0;
z-index: 1;
line-height: 0;
}
.crt-page-monitor-image-base img,
.crt-page-monitor-image-base .mw-file-element {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center center;
transform:
translate(
calc(var(--crt-img-left, 0px) * -1),
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-color {
position: absolute;
inset: 0;
z-index: 2;
line-height: 0;
overflow: hidden;
pointer-events: none;
opacity: 0.18;
will-change: transform, opacity, filter;
}
.crt-page-monitor-color img,
.crt-page-monitor-color .mw-file-element {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center center;
transform:
translate(
calc(var(--crt-img-left, 0px) * -1),
var(--crt-img-down, 0px)
)
scale(var(--crt-img-scale, 1.04));
transform-origin: center center;
}
/* 붉은색 번짐 */
.crt-page-monitor-color-red {
transform: translateX(1px);
mix-blend-mode: screen;
animation: crt-color-red-bleed 5.3s steps(1, end) infinite;
}
.crt-page-monitor-color-red img,
.crt-page-monitor-color-red .mw-file-element {
filter:
brightness(0.52)
sepia(1)
saturate(4)
hue-rotate(305deg)
contrast(1.18);
}
/* 청록색 번짐 */
.crt-page-monitor-color-cyan {
transform: translateX(-1px);
mix-blend-mode: screen;
animation: crt-color-cyan-bleed 6.7s steps(1, end) infinite;
}
.crt-page-monitor-color-cyan img,
.crt-page-monitor-color-cyan .mw-file-element {
filter:
brightness(0.50)
sepia(1)
saturate(4)
hue-rotate(145deg)
contrast(1.16);
}
/* 자홍색 번짐 */
.crt-page-monitor-color-magenta {
transform: translateY(1px);
mix-blend-mode: screen;
animation: crt-color-magenta-bleed 8.1s steps(1, end) infinite;
}
.crt-page-monitor-color-magenta img,
.crt-page-monitor-color-magenta .mw-file-element {
filter:
brightness(0.42)
sepia(1)
saturate(4.5)
hue-rotate(260deg)
contrast(1.14);
}
/* 찢김용 복제 레이어 공통 */
.crt-page-monitor-slice {
position: absolute;
inset: 0;
z-index: 3;
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 img,
.crt-page-monitor-slice .mw-file-element {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center center;
transform:
translate(
calc(var(--crt-img-left, 0px) * -1),
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 유리 곡면 + 가장자리 자연스러운 음영 */
.crt-page-monitor-screen::before {
content: "";
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
border-radius: 8px / 15px;
background:
radial-gradient(
ellipse at 50% 50%,
transparent 0%,
transparent 62%,
rgba(0,0,0,0.16) 78%,
rgba(0,0,0,0.42) 100%
),
linear-gradient(
to bottom,
rgba(0,0,0,0.18) 0%,
transparent 14%,
transparent 82%,
rgba(0,0,0,0.24) 100%
),
linear-gradient(
to right,
rgba(0,0,0,0.18) 0%,
transparent 8%,
transparent 92%,
rgba(0,0,0,0.18) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.030) 18%,
transparent 38%,
transparent 100%
);
box-shadow:
inset 0 0 20px rgba(255,255,255,0.018),
inset 0 0 54px rgba(0,0,0,0.54);
}
/* 스캔라인 */
.crt-page-monitor-screen::after {
content: "";
position: absolute;
inset: -80px 0;
z-index: 21;
pointer-events: none;
opacity: 0.20;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 1px,
transparent 2px,
transparent 5px
);
mix-blend-mode: screen;
animation: crt-scanlines-up 7s linear infinite;
}
/* 지나가는 글리치 빛줄 */
.crt-page-monitor-glitch {
position: absolute;
inset: 0;
z-index: 22;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
to bottom,
transparent 0%,
rgba(255,255,255,0.12) 48%,
rgba(212,90,162,0.20) 50%,
rgba(90,120,255,0.10) 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.10) 10%,
rgba(255,255,255,0.12) 48%,
rgba(212,90,162,0.12) 78%,
transparent 100%
);
mix-blend-mode: screen;
animation: crt-soft-horizontal-tear 5.6s steps(1, end) infinite;
}
/* =========================================
Keyframes
========================================= */
/* 색상 번짐: 평소에는 약하고 순간적으로만 더 어긋남 */
@keyframes crt-color-red-bleed {
0%, 14%, 100% {
opacity: 0.14;
transform: translateX(1px);
}
15% {
opacity: 0.28;
transform: translateX(3px);
}
16% {
opacity: 0.18;
transform: translateX(1px);
}
61% {
opacity: 0.24;
transform: translateX(2px) translateY(-1px);
}
62% {
opacity: 0.14;
transform: translateX(1px);
}
}
@keyframes crt-color-cyan-bleed {
0%, 32%, 100% {
opacity: 0.13;
transform: translateX(-1px);
}
33% {
opacity: 0.30;
transform: translateX(-3px);
}
34% {
opacity: 0.16;
transform: translateX(-1px);
}
74% {
opacity: 0.24;
transform: translateX(-2px) translateY(1px);
}
75% {
opacity: 0.13;
transform: translateX(-1px);
}
}
@keyframes crt-color-magenta-bleed {
0%, 47%, 100% {
opacity: 0.10;
transform: translateY(1px);
}
48% {
opacity: 0.22;
transform: translateX(2px) translateY(1px);
}
49% {
opacity: 0.10;
transform: translateY(1px);
}
88% {
opacity: 0.20;
transform: translateX(-2px) translateY(1px);
}
89% {
opacity: 0.10;
transform: translateY(1px);
}
}
/* 상단 근처 얇은 결 */
@keyframes crt-slice-tear-a {
0%, 11%, 100% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
12% {
opacity: 0.38;
transform: translateX(-18px);
clip-path: inset(17% 0 78% 0);
}
13% {
opacity: 0.22;
transform: translateX(11px);
clip-path: inset(18% 0 77% 0);
filter: hue-rotate(-8deg);
}
14% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
63% {
opacity: 0.30;
transform: translateX(9px);
clip-path: inset(24% 0 70% 0);
}
64% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
}
/* 중앙부 짧은 찢김 */
@keyframes crt-slice-tear-b {
0%, 37%, 100% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
38% {
opacity: 0.42;
transform: translateX(24px);
clip-path: inset(43% 0 50% 0);
}
39% {
opacity: 0.26;
transform: translateX(-14px);
clip-path: inset(45% 0 48% 0);
filter: hue-rotate(10deg) brightness(1.08);
}
40% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
78% {
opacity: 0.34;
transform: translateX(-20px);
clip-path: inset(51% 0 43% 0);
}
79% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
}
/* 하단부 넓은 결 */
@keyframes crt-slice-tear-c {
0%, 21%, 100% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
22% {
opacity: 0.28;
transform: translateX(-30px);
clip-path: inset(67% 0 25% 0);
}
23% {
opacity: 0.18;
transform: translateX(16px);
clip-path: inset(68% 0 23% 0);
filter: contrast(1.25) brightness(1.06);
}
24% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
91% {
opacity: 0.36;
transform: translateX(18px);
clip-path: inset(73% 0 18% 0);
}
92% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 100% 0);
}
}
/* 흐르는 스캔라인 */
@keyframes crt-scanlines-up {
from {
transform: translateY(0);
}
to {
transform: translateY(-80px);
}
}
/* 약한 세로 방향 글리치 빛줄 */
@keyframes crt-soft-glitch-band {
0%, 52%, 100% {
opacity: 0;
transform: translateY(80%);
}
53% {
opacity: 0.42;
transform: translateY(36%);
}
54% {
opacity: 0.16;
transform: translateY(20%) skewX(-1deg);
}
55% {
opacity: 0;
transform: translateY(-20%);
}
}
/* 전체 화면의 약한 수평 신호 밀림 */
@keyframes crt-soft-horizontal-tear {
0%, 68%, 100% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 0 0);
}
69% {
opacity: 0.32;
transform: translateX(-16px);
clip-path: inset(34% 0 58% 0);
}
70% {
opacity: 0.18;
transform: translateX(12px);
clip-path: inset(37% 0 55% 0);
}
71% {
opacity: 0;
transform: translateX(0);
clip-path: inset(0 0 0 0);
}
}