/* ============================================================
   HORIZON — 양자 터미널 토큰
   ---
   근미래 포스트 아포칼립스 / 에트나 서버 CRT 단말기
   ============================================================ */

/* 폰트 */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700;800&family=Share+Tech+Mono&family=VT323&family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

:root {
  /* ===== 팔레트 : 양자 푸른빛 단축 ===== */
  --hz-void:         #000305;   /* 우주 밖, 신호 없음 */
  --hz-ground:       #05080d;   /* 터미널 바탕 */
  --hz-slab:         #0a1016;   /* 패널 배경 */
  --hz-slab-hi:      #0f1820;   /* 패널 hover */
  --hz-iron:         #1a2430;   /* 테두리 */
  --hz-iron-hi:      #2a3848;   /* 테두리 hover */
  --hz-scan:         #0b161f;   /* 스캔라인 */

  /* 시그니처 시안 (크라시오 이끼 발광) */
  --hz-quantum:      #5ef3ff;   /* ★ 주 시그니처 */
  --hz-quantum-hi:   #9cf9ff;   /* 글로우 상한 */
  --hz-quantum-dim:  #2a9aab;   /* 비활성 */
  --hz-quantum-deep: #0a3a45;   /* 인쇄된 시안 */

  /* 캔서 적색 / 경고 */
  --hz-cancer:       #ff4757;   /* 위험·오염 */
  --hz-cancer-dim:   #a8262f;
  --hz-warn:         #ffb84d;   /* 주의 */
  --hz-ok:           #5eff9d;   /* 시스템 OK */

  /* 텍스트 */
  --hz-text:         #c8d4de;   /* 본문 */
  --hz-text-hi:      #e8f4ff;   /* 강조 */
  --hz-text-dim:     #6a7a8a;   /* 디밍 */
  --hz-text-ghost:   #3a4a5a;   /* 거의 안 보임 (힌트용) */

  /* ===== 타이포 ===== */
  --font-term:   'JetBrains Mono', 'Share Tech Mono', ui-monospace, Menlo, monospace;
  --font-crt:    'VT323', 'Share Tech Mono', ui-monospace, monospace;
  --font-kr:     'Noto Sans KR', sans-serif;

  /* 스케일 (터미널은 더 작게 치밀하게) */
  --fs-11:  11px;
  --fs-12:  12px;
  --fs-13:  13px;
  --fs-14:  14px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-22:  22px;
  --fs-28:  28px;
  --fs-36:  36px;
  --fs-48:  48px;
  --fs-64:  64px;
  --fs-88:  88px;

  /* 트래킹 */
  --tr-term:   0.08em;
  --tr-label:  0.25em;
  --tr-hero:   0.18em;

  /* 라인 */
  --lh-term:   1.55;
  --lh-tight:  1.25;
  --lh-prose:  1.8;

  /* ===== 간격 ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ===== 모양 ===== */
  --rad-0: 0;
  --rad-1: 2px;
  --rad-2: 4px;

  /* ===== 글로우 ===== */
  --glow-quantum-sm: 0 0 6px rgba(94,243,255,0.35);
  --glow-quantum:    0 0 12px rgba(94,243,255,0.5);
  --glow-quantum-lg: 0 0 24px rgba(94,243,255,0.55), 0 0 48px rgba(94,243,255,0.2);
  --glow-cancer:     0 0 10px rgba(255,71,87,0.55);

  /* 그림자 */
  --shadow-deep: 0 20px 40px rgba(0,0,0,0.85);
  --shadow-sink: inset 0 0 80px rgba(0,0,0,0.6);

  /* ===== 모션 ===== */
  --t-fast: 0.15s;
  --t-mid:  0.3s;
  --t-slow: 0.6s;
  --ease-step: steps(6, end);   /* 터미널 타이핑 */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== 리셋 & 바디 ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--hz-ground);
  color: var(--hz-text);
  font-family: var(--font-term);
  font-size: var(--fs-14);
  line-height: var(--lh-term);
  letter-spacing: var(--tr-term);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top, rgba(94,243,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at bottom, rgba(94,243,255,0.02) 0%, transparent 70%),
    var(--hz-ground);
}

::selection {
  background: rgba(94,243,255,0.3);
  color: var(--hz-text-hi);
}

/* 스크롤바 (단말기 느낌) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--hz-ground); }
::-webkit-scrollbar-thumb { background: var(--hz-iron); border: 2px solid var(--hz-ground); }
::-webkit-scrollbar-thumb:hover { background: var(--hz-quantum-dim); }

/* ===== 공용 유틸 ===== */
.hz-mono  { font-family: var(--font-term); }
.hz-crt   { font-family: var(--font-crt); }
.hz-kr    { font-family: var(--font-kr); }

.hz-label {
  font-family: var(--font-term);
  font-size: var(--fs-11);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--hz-quantum-dim);
}

.hz-cyan { color: var(--hz-quantum); }
.hz-cancer { color: var(--hz-cancer); }
.hz-warn { color: var(--hz-warn); }
.hz-ok { color: var(--hz-ok); }
.hz-dim { color: var(--hz-text-dim); }
.hz-ghost { color: var(--hz-text-ghost); }

a { color: var(--hz-quantum); text-decoration: none; }
a:hover { text-shadow: var(--glow-quantum-sm); }

h1, h2, h3, h4 {
  font-family: var(--font-term);
  font-weight: 700;
  letter-spacing: var(--tr-hero);
  color: var(--hz-text-hi);
  margin: 0;
  text-transform: uppercase;
}

/* CRT 깜빡이는 커서 */
.hz-cursor::after {
  content: '_';
  color: var(--hz-quantum);
  animation: hz-blink 1s steps(2, end) infinite;
  margin-left: 2px;
}
@keyframes hz-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* 접근성 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}