/* === RESET & BASE === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --void-black: #0a0a0f;
    --midnight-panel: #141420;
    --phosphor-amber: #e8a020;
    --cathode-green: #33ff88;
    --stellar-white: #f0eee6;
    --signal-red: #e03040;
    --nebula-blue: #3366cc;
    --dust-gray: #4a4a5a;
    --gold-star: #ffd740;
    --bezel-dark: #1a1a2a;
    --bezel-light: #3a3a4a;
}

html, body {
    width: 100%;
    min-height: 100vh;
    background: var(--void-black);
    color: var(--stellar-white);
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.72;
    overflow-x: hidden;
}

/* === BOOT OVERLAY === */
#boot-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--void-black);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    transition: opacity 0.8s ease;
}

#boot-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

#boot-text {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    color: var(--cathode-green);
    white-space: nowrap;
}

#boot-cursor {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    color: var(--cathode-green);
    animation: blink 0.6s step-end infinite;
}

#boot-cursor.stopped {
    animation: none;
    opacity: 0;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* === STAR FIELD CANVAS === */
#starfield {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s ease;
}

#starfield.visible {
    opacity: 1;
}

/* === CONSTELLATION SVG === */
#constellation {
    position: fixed;
    top: 5%;
    left: 2%;
    width: 250px;
    height: 250px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

#constellation.visible {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.const-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.const-line.drawn {
    animation: drawLine 0.6s ease forwards;
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

#constellation.pulse .const-line {
    animation: pulseLine 0.6s ease;
}

@keyframes pulseLine {
    0% { stroke-width: 1; }
    50% { stroke-width: 3; }
    100% { stroke-width: 1; }
}

#constellation.pulse circle {
    animation: pulseStars 0.6s ease;
}

@keyframes pulseStars {
    0% { opacity: 0.7; }
    50% { opacity: 1; r: 4; }
    100% { opacity: 0.7; }
}

/* === WATERMARK === */
#watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 40vw;
    color: var(--phosphor-amber);
    opacity: 0.03;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

/* === DASHBOARD GRID === */
#dashboard {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 100vh;
    padding: 12px;
    gap: 8px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto 1fr 1fr 1fr auto auto auto;
    grid-template-areas:
        "star  star  star  title title title title title nav   nav   nav   nav"
        "star  star  star  orbit orbit orbit orbit orbit orbit nav   nav   nav"
        "gauge gauge main  main  main  main  main  main  main  main  side  side"
        "gauge gauge main  main  main  main  main  main  main  main  side  side"
        "gauge gauge main  main  main  main  main  main  main  main  side  side"
        "tape  tape  tape  tape  tape  tape  tape  tape  tape  tape  side  side"
        "foot  foot  foot  readout readout readout readout readout readout foot2 foot2 foot2"
        "foot  foot  foot  readout readout readout readout readout readout foot2 foot2 foot2";
}

/* === PANELS === */
.panel {
    background: var(--midnight-panel);
    border: 1px solid var(--dust-gray);
    border-radius: 4px;
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.hidden-panel {
    opacity: 0;
    transform: scale(0.95);
}

.panel.revealed {
    animation: panelReveal 0.5s ease forwards;
}

@keyframes panelReveal {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* === NAV ZONE === */
#zone-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding: 12px 20px;
}

.nav-link {
    font-family: 'Space Mono', monospace;
    font-size: clamp(0.8rem, 1vw, 1rem);
    color: var(--stellar-white);
    text-decoration: none;
    position: relative;
}

.nav-text {
    background-image: linear-gradient(var(--phosphor-amber), var(--phosphor-amber));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-bottom: 2px;
    transition: background-size 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-link:hover .nav-text {
    background-size: 100% 2px;
}

/* === TITLE ZONE === */
#zone-title {
    grid-area: title;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 24px;
    background: transparent;
    border: none;
}

.site-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(2.5rem, 7vw, 6rem);
    letter-spacing: -0.03em;
    color: var(--phosphor-amber);
    line-height: 1;
}

.title-dot {
    color: var(--cathode-green);
}

.site-subtitle {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: clamp(0.8rem, 1.2vw, 1.1rem);
    color: var(--dust-gray);
    margin-top: 4px;
}

/* === STAR ZONE === */
#zone-star {
    grid-area: star;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 30% 30%, var(--bezel-light), var(--bezel-dark));
}

.star-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    color: var(--dust-gray);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.star-map {
    width: 100%;
    max-width: 180px;
    animation: rotateMap 720s linear infinite;
}

@keyframes rotateMap {
    to { transform: rotate(360deg); }
}

/* === ORBIT ZONE === */
#zone-orbit {
    grid-area: orbit;
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.orbit-readout {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.readout-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    color: var(--dust-gray);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.readout-value {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--cathode-green);
}

.sentiment-positive {
    color: var(--phosphor-amber);
}

.sparkline {
    width: 60px;
    height: 16px;
}

.spark-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.spark-path.drawn {
    animation: drawSpark 1s ease forwards;
}

@keyframes drawSpark {
    to { stroke-dashoffset: 0; }
}

/* === GAUGE ZONE === */
#zone-gauge {
    grid-area: gauge;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 30% 30%, var(--bezel-light), var(--bezel-dark));
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
}

.gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
}

.gauge:hover {
    transform: scale(1.05);
}

.gauge-svg {
    width: 100px;
    height: 100px;
}

.gauge-needle {
    transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: 60px 60px;
}

.gauge-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    color: var(--dust-gray);
    margin-top: 4px;
}

.gauge-value {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--phosphor-amber);
}

/* === MAIN ZONE === */
#zone-main {
    grid-area: main;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--dust-gray) var(--midnight-panel);
}

.insight-card {
    background: var(--void-black);
    border: 1px solid var(--dust-gray);
    padding: 24px 24px 24px 36px;
    position: relative;
    clip-path: inset(45% 0 45% 0);
    transition: clip-path 0.4s ease;
    opacity: 0;
}

.insight-card.visible {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

.card-sprocket {
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 16px;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 14px,
        var(--dust-gray) 14px,
        var(--dust-gray) 16px
    );
}

.card-sprocket::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 8px;
    width: 8px;
    height: 8px;
    background: var(--midnight-panel);
    border-radius: 50%;
    box-shadow:
        0 24px 0 var(--midnight-panel),
        0 48px 0 var(--midnight-panel),
        0 72px 0 var(--midnight-panel),
        0 96px 0 var(--midnight-panel),
        0 120px 0 var(--midnight-panel);
}

.card-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    color: var(--phosphor-amber);
    margin-bottom: 8px;
    letter-spacing: -0.03em;
}

.card-body {
    color: var(--stellar-white);
    font-size: clamp(0.85rem, 1vw, 1rem);
    line-height: 1.72;
    margin-bottom: 12px;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.meta-date {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: var(--dust-gray);
}

.inline-spark {
    width: 60px;
    height: 16px;
}

/* === SIDE ZONE === */
#zone-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.side-title {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: var(--dust-gray);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.timeline-events {
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
}

.timeline-event {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-date {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--dust-gray);
}

.event-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    color: var(--stellar-white);
}

.event-bar {
    height: 3px;
    background: linear-gradient(to right, var(--cathode-green), transparent);
    border-radius: 2px;
    opacity: 0.6;
}

.oscilloscope-trace {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 100%;
    opacity: 0.3;
}

.osc-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}

.osc-path.drawn {
    animation: drawOsc 2s ease forwards;
}

@keyframes drawOsc {
    to { stroke-dashoffset: 0; }
}

/* === TAPE ZONE (TICKER) === */
#zone-tape {
    grid-area: tape;
    padding: 8px 0;
    overflow: hidden;
    background: repeating-linear-gradient(
        to bottom,
        var(--midnight-panel) 0px,
        var(--midnight-panel) 1px,
        var(--dust-gray) 1px,
        var(--dust-gray) 2px
    );
    background-size: 100% 2px;
}

.ticker-track {
    overflow: hidden;
    width: 100%;
}

.ticker-content {
    display: inline-flex;
    gap: 16px;
    white-space: nowrap;
    animation: tickerScroll 30s linear infinite;
    padding: 4px 0;
}

#zone-tape:hover .ticker-content {
    animation-duration: 120s;
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.ticker-item {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--cathode-green);
}

.ticker-sep {
    color: var(--dust-gray);
    font-size: 0.5rem;
}

/* === FOOTER ZONES === */
#zone-foot {
    grid-area: foot;
    display: flex;
    align-items: center;
}

#zone-readout {
    grid-area: readout;
}

#zone-foot2 {
    grid-area: foot2;
    display: flex;
    align-items: center;
}

.foot-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.foot-brand {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: var(--phosphor-amber);
}

.foot-copy, .foot-year, .foot-info {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    color: var(--dust-gray);
}

/* === READOUT DISPLAY === */
.readout-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.readout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(74, 74, 90, 0.3);
}

.readout-key {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--dust-gray);
    letter-spacing: 0.05em;
}

.readout-val {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cathode-green);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    #dashboard {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "title"
            "nav"
            "star"
            "orbit"
            "gauge"
            "main"
            "tape"
            "side"
            "readout"
            "foot"
            "foot2";
    }

    #zone-nav {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    #zone-gauge {
        flex-direction: row;
        overflow-x: auto;
    }

    #zone-tape {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    #constellation {
        width: 150px;
        height: 150px;
    }

    .site-title {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }
}