참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: 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 {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: 5px;
animation: crt-pixel-jitter 5.5s steps(1, end) infinite;
}
.crt-glitch-panel > * {
position: relative;
z-index: 2;
}
.crt-glitch-panel::before {
content: "";
position: absolute;
inset: -80px 0;
z-index: 3;
pointer-events: none;
opacity: 0.28;
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;
}
@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-pixel-jitter {
0%, 92%, 100% {
transform: translate(0, 0);
filter: none;
}
93% {
transform: translate(1px, 0);
filter: contrast(1.08);
}
94% {
transform: translate(-1px, 1px);
filter: contrast(1.12) brightness(1.05);
}
95% {
transform: translate(0, -1px);
filter: contrast(1.04);
}
96% {
transform: translate(1px, 1px);
filter: none;
}
}
/* 글로우 */
.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.85;
}
.crt-glitch-panel {
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 .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);
}