참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* 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(16, 7, 24, 0.98) 0%,
rgba(31, 11, 41, 0.82) 44%,
rgba(66, 24, 70, 0.50) 60%,
rgba(5, 5, 9, 0.96) 61%,
rgba(2, 2, 5, 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;
}
}