:root {
    --terminal-black: #0A1A0A;
    --phosphor-green: #00FF41;
    --deep-forest: #0D3B1E;
    --matrix-fade: #1A5C32;
    --amber-warning: #FFB627;
    --coral-error: #FF6B6B;
    --ghost-green: #C8F7C5;
    --charcoal-shell: #1C2B1C;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'IBM Plex Mono', monospace;
    background: var(--terminal-black);
    color: var(--ghost-green);
    overflow-x: hidden;
    animation: scanlineFlicker 4s infinite;
}

@keyframes scanlineFlicker {
    0%, 95% { opacity: 1; }
    96% { opacity: 0.97; }
    97% { opacity: 1; }
    98% { opacity: 0.98; }
    100% { opacity: 1; }
}

.scanlines {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
    pointer-events: none; z-index: 9999;
}

.terminal-frame {
    border: 1px solid #0D1F0D;
    min-height: 100vh;
}

.terminal-bar {
    background: var(--charcoal-shell);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.terminal-dots { display: flex; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-red { background: var(--coral-error); }
.dot-yellow { background: var(--amber-warning); }
.dot-green { background: var(--phosphor-green); }

.terminal-title {
    font-size: 12px;
    color: var(--matrix-fade);
    letter-spacing: 0.05em;
}

.spread {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 4rem 3rem;
    display: flex;
    align-items: center;
}

.spread-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Boot Sequence */
.spread-boot {
    flex-direction: column;
    justify-content: center;
    padding: 10vh 3rem;
}

.boot-text { max-width: 800px; }

.boot-line {
    font-size: 14px;
    line-height: 1.6;
    color: var(--phosphor-green);
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    border-right: 2px solid var(--phosphor-green);
}

.boot-line.typed {
    animation: typing 0.6s steps(40) forwards, blinkCaret 1s step-end infinite;
}

.line-1.typed { animation-delay: 0s; }
.line-2.typed { animation-delay: 0.4s; }
.line-3.typed { animation-delay: 0.8s; }
.line-4.typed { animation-delay: 1.2s; }
.line-5.typed { animation-delay: 1.6s; }
.line-6.typed { animation-delay: 2.0s; }

@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blinkCaret { 50% { border-color: transparent; } }

.text-amber { color: var(--amber-warning); }
.text-green { color: var(--phosphor-green); }

/* Identity */
.spread-identity { background: var(--terminal-black); }

.hangul-watermark {
    position: absolute;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 900;
    font-size: 25vw;
    color: #2EFF2E;
    opacity: 0.04;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

.identity-name {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.name-letter {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    color: var(--phosphor-green);
    letter-spacing: -0.03em;
}

.identity-bio {
    margin-top: 2rem;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ghost-green);
    max-width: 40ch;
}

.bokeh-field {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.spread-right { position: relative; min-height: 400px; }

.bokeh-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    animation: bokehDrift 20s ease-in-out infinite;
}

@keyframes bokehDrift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(10px, -8px); }
}

.b1 { width: 120px; height: 120px; background: rgba(0,255,65,0.15); top: 10%; left: 20%; animation-duration: 18s; }
.b2 { width: 180px; height: 180px; background: rgba(26,92,50,0.2); top: 30%; left: 50%; animation-duration: 22s; }
.b3 { width: 80px; height: 80px; background: rgba(255,182,39,0.12); top: 60%; left: 15%; animation-duration: 16s; }
.b4 { width: 150px; height: 150px; background: rgba(0,255,65,0.1); top: 50%; left: 70%; animation-duration: 25s; }
.b5 { width: 60px; height: 60px; background: rgba(255,107,107,0.1); top: 20%; left: 80%; animation-duration: 19s; }
.b6 { width: 200px; height: 200px; background: rgba(13,59,30,0.25); top: 70%; left: 40%; animation-duration: 23s; }
.b7 { width: 100px; height: 100px; background: rgba(0,255,65,0.08); top: 5%; left: 55%; animation-duration: 17s; }
.b8 { width: 140px; height: 140px; background: rgba(26,92,50,0.15); top: 80%; left: 75%; animation-duration: 21s; }
.b9 { width: 70px; height: 70px; background: rgba(255,182,39,0.08); top: 40%; left: 30%; animation-duration: 24s; }
.b10 { width: 160px; height: 160px; background: rgba(0,255,65,0.12); top: 15%; left: 65%; animation-duration: 20s; }

.dojang {
    position: absolute;
    bottom: 2rem; right: 2rem;
    font-family: 'Noto Sans KR', serif;
    font-size: 2rem;
    color: var(--coral-error);
    border: 2px solid var(--coral-error);
    width: 3rem; height: 3rem;
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
}

.ascii-divider {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    line-height: 1;
    color: var(--matrix-fade);
    opacity: 0.4;
    padding: 24px 0;
    overflow: hidden;
    text-align: center;
}

.ascii-mini {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--deep-forest);
    padding: 1rem 0;
}

/* Projects */
.spread-projects {
    background: var(--terminal-black);
    padding: 6rem 3rem;
}

.project-block {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-left: 2px solid var(--deep-forest);
    transition: border-color 250ms;
}

.project-block:hover { border-color: var(--phosphor-green); }

.project-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: var(--phosphor-green);
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.project-meta {
    font-size: 11px;
    color: var(--matrix-fade);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.project-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ghost-green);
}

.shake-hover:hover {
    animation: shakeError 300ms ease;
}

@keyframes shakeError {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(2px, -1px); }
    75% { transform: translate(-1px, -1px); }
}

.bp1 { width: 130px; height: 130px; background: rgba(0,255,65,0.12); top: 15%; left: 25%; animation-duration: 19s; }
.bp2 { width: 90px; height: 90px; background: rgba(26,92,50,0.18); top: 40%; left: 60%; animation-duration: 22s; }
.bp3 { width: 170px; height: 170px; background: rgba(0,255,65,0.08); top: 65%; left: 35%; animation-duration: 25s; }
.bp4 { width: 60px; height: 60px; background: rgba(255,182,39,0.1); top: 20%; left: 75%; animation-duration: 17s; }
.bp5 { width: 110px; height: 110px; background: rgba(13,59,30,0.2); top: 50%; left: 15%; animation-duration: 21s; }
.bp6 { width: 80px; height: 80px; background: rgba(0,255,65,0.15); top: 80%; left: 55%; animation-duration: 18s; }
.bp7 { width: 140px; height: 140px; background: rgba(26,92,50,0.12); top: 10%; left: 45%; animation-duration: 23s; }
.bp8 { width: 50px; height: 50px; background: rgba(255,107,107,0.08); top: 70%; left: 80%; animation-duration: 16s; }

/* Philosophy */
.spread-philosophy {
    background: var(--deep-forest);
    justify-content: center;
    text-align: center;
}

.micro-shake {
    animation: microShake 8s ease-in-out infinite;
}

@keyframes microShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-0.5px, 0.3px); }
    50% { transform: translate(0.5px, -0.5px); }
    75% { transform: translate(-0.3px, -0.3px); }
}

.philosophy-content { position: relative; z-index: 5; }

.philosophy-quote {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: clamp(3rem, 8vw, 7rem);
    color: var(--phosphor-green);
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 16ch;
    margin: 0 auto;
}

.philosophy-kr {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--ghost-green);
    opacity: 0.6;
    margin-top: 2rem;
}

.ph1 { width: 200px; height: 200px; background: rgba(0,255,65,0.08); top: 5%; left: 10%; animation-duration: 20s; }
.ph2 { width: 150px; height: 150px; background: rgba(26,92,50,0.15); top: 30%; left: 70%; animation-duration: 18s; }
.ph3 { width: 100px; height: 100px; background: rgba(0,255,65,0.1); top: 60%; left: 20%; animation-duration: 22s; }
.ph4 { width: 180px; height: 180px; background: rgba(13,59,30,0.2); top: 40%; left: 45%; animation-duration: 25s; }
.ph5 { width: 80px; height: 80px; background: rgba(255,182,39,0.06); top: 75%; left: 65%; animation-duration: 16s; }
.ph6 { width: 130px; height: 130px; background: rgba(0,255,65,0.07); top: 15%; left: 85%; animation-duration: 19s; }
.ph7 { width: 110px; height: 110px; background: rgba(26,92,50,0.12); top: 80%; left: 40%; animation-duration: 23s; }
.ph8 { width: 160px; height: 160px; background: rgba(0,255,65,0.06); top: 50%; left: 5%; animation-duration: 21s; }
.ph9 { width: 70px; height: 70px; background: rgba(255,107,107,0.05); top: 25%; left: 35%; animation-duration: 17s; }
.ph10 { width: 140px; height: 140px; background: rgba(13,59,30,0.18); top: 70%; left: 80%; animation-duration: 24s; }
.ph11 { width: 90px; height: 90px; background: rgba(0,255,65,0.09); top: 10%; left: 55%; animation-duration: 20s; }
.ph12 { width: 120px; height: 120px; background: rgba(26,92,50,0.1); top: 55%; left: 30%; animation-duration: 22s; }

/* Signal */
.spread-signal { background: var(--terminal-black); }

.signal-output { padding: 2rem 0; }

.signal-line {
    font-size: 14px;
    line-height: 2;
    color: var(--ghost-green);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.signal-line.visible {
    opacity: 1;
    transform: translateY(0);
}

.bs1 { width: 150px; height: 150px; background: rgba(255,182,39,0.15); top: 15%; left: 20%; animation-duration: 19s; }
.bs2 { width: 100px; height: 100px; background: rgba(255,107,107,0.12); top: 40%; left: 60%; animation-duration: 22s; }
.bs3 { width: 180px; height: 180px; background: rgba(255,182,39,0.1); top: 65%; left: 35%; animation-duration: 25s; }
.bs4 { width: 80px; height: 80px; background: rgba(255,107,107,0.08); top: 20%; left: 75%; animation-duration: 17s; }
.bs5 { width: 120px; height: 120px; background: rgba(255,182,39,0.18); top: 50%; left: 15%; animation-duration: 21s; }
.bs6 { width: 70px; height: 70px; background: rgba(255,107,107,0.1); top: 80%; left: 55%; animation-duration: 18s; }
.bs7 { width: 200px; height: 200px; background: rgba(255,182,39,0.08); top: 10%; left: 45%; animation-duration: 23s; }
.bs8 { width: 90px; height: 90px; background: rgba(255,107,107,0.06); top: 70%; left: 80%; animation-duration: 16s; }

/* EOF */
.spread-eof {
    min-height: 50vh;
    background: var(--terminal-black);
    flex-direction: column;
    justify-content: center;
}

.eof-text { max-width: 600px; }

.eof-line {
    font-size: 14px;
    line-height: 1.8;
    color: var(--phosphor-green);
    opacity: 0.3;
}

/* Nav Prompt */
.nav-prompt {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    padding: 10px 16px;
    background: var(--charcoal-shell);
    border-top: 1px solid #0D1F0D;
    z-index: 200;
    font-size: 14px;
    color: var(--phosphor-green);
}

.cursor-blink {
    animation: blinkCaret 1s step-end infinite;
}

@media (max-width: 900px) {
    .spread-grid {
        grid-template-columns: 1fr;
    }
    .spread-right {
        min-height: 250px;
    }
    .spread {
        padding: 3rem 1.5rem;
    }
}