이곳에 들어온 자, 모든 희망을 버려라
C.O.D.A. TERMINAL /// 연옥의 호(弧) - 제102팀
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-red: #ff0033;
--warning-orange: #ff6600;
--corrupt-cyan: #00ffcc;
--dead-gray: #1a1a1a;
--ash-gray: #2a2a2a;
--dust-gray: #4a4a4a;
--blood-red: #cc0000;
--glitch-green: #00ff00;
}
body {
background: linear-gradient(180deg, #0a0a0a 0%, #1a0a0a 50%, #0a0a0a 100%);
color: #e0e0e0;
font-family: 'Exo 2', sans-serif;
overflow-x: hidden;
position: relative;
min-height: 100vh;
}
/* Static noise overlay */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px),
repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.3) 2px, rgba(0, 0, 0, 0.3) 4px);
pointer-events: none;
z-index: 9999;
animation: noise 0.3s infinite;
}
@keyframes noise {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.15; }
}
/* Scanlines */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
z-index: 9998;
animation: scanline 8s linear infinite;
}
@keyframes scanline {
0% { transform: translateY(0); }
100% { transform: translateY(100vh); }
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
position: relative;
z-index: 1;
}
/* Header with glitch effect */
.header {
text-align: center;
margin-bottom: 60px;
padding: 40px 20px;
border: 2px solid var(--primary-red);
border-radius: 0;
background: rgba(26, 26, 26, 0.8);
position: relative;
overflow: hidden;
box-shadow:
0 0 20px rgba(255, 0, 51, 0.3),
inset 0 0 20px rgba(255, 0, 51, 0.1);
}
.header::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, var(--primary-red), var(--warning-orange), var(--corrupt-cyan));
z-index: -1;
opacity: 0.3;
animation: borderGlow 3s ease-in-out infinite;
}
@keyframes borderGlow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.system-label {
font-family: 'Share Tech Mono', monospace;
font-size: 12px;
color: var(--corrupt-cyan);
letter-spacing: 3px;
margin-bottom: 10px;
animation: flicker 4s infinite;
}
@keyframes flicker {
0%, 100% { opacity: 1; }
41%, 43% { opacity: 0.4; }
45%, 47% { opacity: 1; }
50%, 52% { opacity: 0.6; }
}
.title {
font-family: 'Orbitron', sans-serif;
font-size: 48px;
font-weight: 900;
color: var(--primary-red);
text-transform: uppercase;
letter-spacing: 5px;
margin-bottom: 20px;
text-shadow:
0 0 10px rgba(255, 0, 51, 0.8),
0 0 20px rgba(255, 0, 51, 0.6),
0 0 30px rgba(255, 0, 51, 0.4),
2px 2px 0px rgba(0, 255, 204, 0.3);
position: relative;
animation: titleGlitch 5s infinite;
}
@keyframes titleGlitch {
0%, 90%, 100% {
transform: translate(0);
text-shadow:
0 0 10px rgba(255, 0, 51, 0.8),
0 0 20px rgba(255, 0, 51, 0.6),
0 0 30px rgba(255, 0, 51, 0.4),
2px 2px 0px rgba(0, 255, 204, 0.3);
}
91% {
transform: translate(-2px, 2px);
text-shadow:
0 0 10px rgba(255, 0, 51, 0.8),
-5px 0 rgba(0, 255, 204, 0.8),
5px 0 rgba(255, 102, 0, 0.8);
}
92% {
transform: translate(2px, -2px);
}
93% {
transform: translate(-2px, 2px);
}
}
.subtitle {
font-family: 'Share Tech Mono', monospace;
font-size: 14px;
color: var(--warning-orange);
letter-spacing: 2px;
}
/* Content sections */
.content-block {
background: rgba(42, 42, 42, 0.6);
border-left: 4px solid var(--primary-red);
padding: 30px;
margin-bottom: 30px;
position: relative;
backdrop-filter: blur(5px);
animation: fadeInUp 1s ease-out;
}
.content-block::before {
content: '>>>';
position: absolute;
top: 10px;
left: 10px;
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
color: var(--corrupt-cyan);
opacity: 0.5;
}
.content-block.error {
border-left-color: var(--warning-orange);
animation: errorPulse 2s infinite, fadeInUp 1s ease-out;
}
@keyframes errorPulse {
0%, 100% {
background: rgba(42, 42, 42, 0.6);
box-shadow: 0 0 0 rgba(255, 102, 0, 0);
}
50% {
background: rgba(60, 30, 20, 0.6);
box-shadow: 0 0 20px rgba(255, 102, 0, 0.3);
}
}
.content-block.corrupted {
border-left-color: var(--corrupt-cyan);
transform: skewX(-1deg);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.content-block p {
font-size: 16px;
line-height: 1.8;
color: #c0c0c0;
margin-bottom: 15px;
font-weight: 300;
}
.content-block p:last-child {
margin-bottom: 0;
}
/* Emphasized text in parentheses */
.emphasize {
color: var(--primary-red);
font-weight: 700;
text-shadow: 0 0 5px rgba(255, 0, 51, 0.5);
font-size: 1.1em;
letter-spacing: 1px;
position: relative;
display: inline-block;
animation: emphasizeGlow 3s infinite;
}
@keyframes emphasizeGlow {
0%, 100% {
color: var(--primary-red);
text-shadow: 0 0 5px rgba(255, 0, 51, 0.5);
}
50% {
color: var(--warning-orange);
text-shadow: 0 0 10px rgba(255, 102, 0, 0.8);
}
}
/* Error message styling */
.error-line {
font-family: 'Share Tech Mono', monospace;
color: var(--warning-orange);
font-size: 14px;
border-left: 3px solid var(--warning-orange);
padding-left: 15px;
margin: 20px 0;
font-style: italic;
animation: blinkError 1.5s infinite;
}
@keyframes blinkError {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0.6; }
}
/* Divider with corruption */
.divider {
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--primary-red) 20%,
var(--corrupt-cyan) 50%,
var(--primary-red) 80%,
transparent 100%);
margin: 50px 0;
position: relative;
animation: dividerGlitch 4s infinite;
}
@keyframes dividerGlitch {
0%, 95%, 100% {
transform: scaleX(1);
opacity: 1;
}
96% {
transform: scaleX(0.95) translateX(-10px);
opacity: 0.7;
}
97% {
transform: scaleX(1.05) translateX(10px);
opacity: 0.8;
}
98% {
transform: scaleX(0.98);
opacity: 0.9;
}
}
/* Final message */
.final-message {
text-align: center;
padding: 50px 30px;
background: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(42, 10, 10, 0.9) 100%);
border: 2px solid var(--primary-red);
margin-top: 60px;
position: relative;
overflow: hidden;
}
.final-message::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 0, 51, 0.2), transparent);
animation: sweep 4s infinite;
}
@keyframes sweep {
0% { left: -100%; }
100% { left: 200%; }
}
.final-message .quote {
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: 400;
color: var(--corrupt-cyan);
line-height: 1.6;
margin-bottom: 20px;
font-style: italic;
text-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
position: relative;
z-index: 1;
}
.final-message .signature {
font-family: 'Share Tech Mono', monospace;
font-size: 14px;
color: var(--dust-gray);
letter-spacing: 2px;
position: relative;
z-index: 1;
}
/* System errors floating */
.system-error {
position: fixed;
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
color: var(--primary-red);
pointer-events: none;
z-index: 100;
opacity: 0;
animation: errorFloat 10s linear infinite;
}
@keyframes errorFloat {
0% {
opacity: 0;
transform: translateY(100vh) translateX(0);
}
10% {
opacity: 0.7;
}
90% {
opacity: 0.7;
}
100% {
opacity: 0;
transform: translateY(-100px) translateX(50px);
}
}
.system-error:nth-child(1) { left: 10%; animation-delay: 0s; }
.system-error:nth-child(2) { left: 30%; animation-delay: 3s; }
.system-error:nth-child(3) { left: 50%; animation-delay: 6s; }
.system-error:nth-child(4) { left: 70%; animation-delay: 9s; }
.system-error:nth-child(5) { left: 90%; animation-delay: 12s; }
/* Glitch overlay effects */
.glitch-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9997;
opacity: 0;
animation: randomGlitch 15s infinite;
}
@keyframes randomGlitch {
0%, 95%, 100% {
opacity: 0;
}
96% {
opacity: 1;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 0, 51, 0.1) 48%,
rgba(255, 0, 51, 0.1) 52%,
transparent 100%);
}
}
/* Damaged text effect */
.damaged {
position: relative;
display: inline-block;
}
.damaged::after {
content: attr(data-text);
position: absolute;
left: 2px;
top: 0;
color: var(--corrupt-cyan);
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
animation: damageFlicker 0.5s infinite;
}
@keyframes damageFlicker {
0%, 100% { opacity: 0; }
50% { opacity: 0.8; left: -2px; }
}
/* Responsive design */
@media (max-width: 768px) {
.title {
font-size: 32px;
letter-spacing: 2px;
}
.content-block {
padding: 20px;
}
.final-message .quote {
font-size: 16px;
}
}
/* Loading bar animation */
.loading-bar {
height: 3px;
background: var(--dead-gray);
margin: 20px 0;
position: relative;
overflow: hidden;
}
.loading-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%;
background: linear-gradient(90deg,
transparent,
var(--primary-red),
var(--warning-orange),
transparent);
animation: loading 2s linear infinite;
}
@keyframes loading {
0% { left: -30%; }
100% { left: 100%; }
}
ERR_0x7A3F: MEMORY CORRUPTION DETECTED
WARNING: TRUST_PROTOCOL FAILED
ALERT: INTERNAL_CONFLICT UNRESOLVED
ERR_0x9B2C: HARMONY MATRIX COLLAPSED
CRITICAL: SECTOR_102 INTEGRITY COMPROMISED
C.O.D.A. TERMINAL /// ACCESS GRANTED
연옥의 호(弧) - 제102팀
SECTOR 390 /// PURGATORY ARC
마법과 기술이 조화롭게 발전한 세계, 심포니움.
그리고 세계와 틈새의 경계, 끝의 땅에서 일어나는 일들을 총괄하는 연합, C.O.D.A.
...같은 이상론적 이야기는 집어치우자.
끝의 땅, 390번대 구역, '연옥의 호(弧)'에서 살아가던 제102팀. 그러나 그들의 삶과 위업은 이간질과 불신으로 산산조각나고 만다.
의심은 불씨이며, 불씨는 인간의 이성을 연료삼아 질주했다.
7년 동안 불타오른 서로에 대한 근원적 증오는 멈추지 않았고, 그렇게 생긴 내부의 분열은 끝없는 상흔을 남겼다.
유저 또한, 그 전쟁의 피해자이자 가해자.
분열은 간신히 끝났지만, 그 대가는 참혹했다.
유저에게 남은 것이라곤 '종언자'라는 이명. 그리고 어느 날 아드레스가 유저에게 남긴 편지 하나.
'네가 일어나면, 399구역으로 찾아와 줘. 난 거기서 널 영원히 기다리고 있을게.'
— MESSAGE FROM ADRETH /// SECTOR 399
// Additional glitch effects on scroll
window.addEventListener('scroll', () => {
const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight);
if (Math.random() > 0.95 && scrollPercent > 0.3) {
document.body.style.filter = 'hue-rotate(180deg) contrast(1.5)';
setTimeout(() => {
document.body.style.filter = 'none';
}, 50);
}
});
// Random screen tear effect
setInterval(() => {
if (Math.random() > 0.98) {
const blocks = document.querySelectorAll('.content-block');
blocks.forEach(block => {
block.style.transform = `translateX(${Math.random() * 10 - 5}px)`;
setTimeout(() => {
block.style.transform = 'translateX(0)';
}, 100);
});
}
}, 2000);
// Cursor corruption effect
document.addEventListener('mousemove', (e) => {
if (Math.random() > 0.99) {
document.body.style.cursor = 'none';
setTimeout(() => {
document.body.style.cursor = 'default';
}, 200);
}
});
C.O.D.A. TERMINAL /// 연옥의 호(弧) - 제102팀
ERR_0x7A3F: MEMORY CORRUPTION DETECTED
WARNING: TRUST_PROTOCOL FAILED
ALERT: INTERNAL_CONFLICT UNRESOLVED
ERR_0x9B2C: HARMONY MATRIX COLLAPSED
CRITICAL: SECTOR_102 INTEGRITY COMPROMISED
마법과 기술이 조화롭게 발전한 세계, 심포니움.
그리고 세계와 틈새의 경계, 끝의 땅에서 일어나는 일들을 총괄하는 연합, C.O.D.A.
끝의 땅, 390번대 구역, '연옥의 호(弧)'에서 살아가던 제102팀. 그러나 그들의 삶과 위업은 이간질과 불신으로 산산조각나고 만다.
의심은 불씨이며, 불씨는 인간의 이성을 연료삼아 질주했다.
7년 동안 불타오른 서로에 대한 근원적 증오는 멈추지 않았고, 그렇게 생긴 내부의 분열은 끝없는 상흔을 남겼다.
유저 또한, 그 전쟁의 피해자이자 가해자.
분열은 간신히 끝났지만, 그 대가는 참혹했다.
유저에게 남은 것이라곤 '종언자'라는 이명. 그리고 어느 날 아드레스가 유저에게 남긴 편지 하나.
'네가 일어나면, 399구역으로 찾아와 줘. 난 거기서 널 영원히 기다리고 있을게.'
— MESSAGE FROM ADRETH /// SECTOR 399
@카민
로그인 후 댓글을 작성할 수 있습니다.