/* ============================================================
   HORIZON // ETNA_TERMINAL — 콘솔 구조 (v3 리빌드 2026-06-13)
   명령어 구동 단일 콘솔. 입력 → 로딩 → 결과 출력.
   ------------------------------------------------------------
   구조:
   .crt              전역 CRT 오버레이(스캔라인/노이즈/비네팅)
   .term             콘솔 셸 (max-width 중앙 정렬)
     .term__bar      상단 상태바
     .term__screen   출력 스트림 (스크롤)
       .line         출력 한 줄 (역할별 modifier)
     .term__prompt   하단 입력 행 (프롬프트 + input)
   ============================================================ */

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

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--hz-void);
  color: var(--hz-text);
  font-family: var(--font-term);
  font-size: var(--fs-14);
  line-height: var(--line-h);
  letter-spacing: var(--tr-term);
  -webkit-font-smoothing: antialiased;
}

body { overflow: hidden; }  /* 콘솔이 스크롤 담당 */

::selection { background: var(--hz-quantum-deep); color: var(--hz-quantum-hi); }

/* ===== CRT 전역 오버레이 ===== */
.crt {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
}
.crt::before {  /* 스캔라인 */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 2px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 3px
  );
  mix-blend-mode: multiply;
}
.crt::after {  /* 비네팅 + 양자 광량 */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(94,243,255,0.04), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.crt__flicker {
  position: fixed; inset: 0; z-index: 51; pointer-events: none;
  background: rgba(94,243,255,0.015);
  animation: crt-flicker 7s infinite steps(60);
}
@keyframes crt-flicker { 0%,96%,100% {opacity:0;} 97% {opacity:1;} 98% {opacity:0.2;} 99% {opacity:0.7;} }

/* ===== 콘솔 셸 ===== */
.term {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--term-max);
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(var(--hz-ground), var(--hz-ground)) padding-box,
    linear-gradient(180deg, var(--hz-iron), transparent) border-box;
  border-left: 1px solid var(--hz-iron);
  border-right: 1px solid var(--hz-iron);
}

/* ----- 상단 상태바 ----- */
.term__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--hz-iron);
  background: var(--hz-slab);
  font-size: var(--fs-11);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--hz-text-dim);
  user-select: none;
}
.term__bar-id { color: var(--hz-quantum); text-shadow: var(--glow-q-s); }
.term__bar-spacer { flex: 1; }
.term__dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--hz-ok); box-shadow: 0 0 6px var(--hz-ok);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% {opacity:1;} 50% {opacity:0.35;} }

/* ----- 출력 스크린 ----- */
.term__screen {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-4) var(--sp-5);
  scroll-behavior: smooth;
}
.term__screen::-webkit-scrollbar { width: 8px; }
.term__screen::-webkit-scrollbar-track { background: var(--hz-ground); }
.term__screen::-webkit-scrollbar-thumb { background: var(--hz-iron); border-radius: 4px; }
.term__screen::-webkit-scrollbar-thumb:hover { background: var(--hz-iron-hi); }

/* ----- 출력 라인 ----- */
.line {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  animation: line-in 0.12s ease both;
}
@keyframes line-in { from {opacity:0; transform: translateY(2px);} to {opacity:1; transform:none;} }

.line--dim    { color: var(--hz-text-dim); }
.line--ghost  { color: var(--hz-text-ghost); }
.line--hi     { color: var(--hz-text-hi); }
.line--q      { color: var(--hz-quantum); text-shadow: var(--glow-q-s); }
.line--ok     { color: var(--hz-ok); }
.line--warn   { color: var(--hz-warn); }
.line--err    { color: var(--hz-cancer); text-shadow: var(--glow-r); }
.line--label  { color: var(--hz-quantum-dim); letter-spacing: var(--tr-label); text-transform: uppercase; font-size: var(--fs-11); }

/* 입력 에코 (사용자가 친 명령) */
.line--echo { color: var(--hz-text-hi); }
.line--echo::before { content: '> '; color: var(--hz-quantum); }

/* 로딩 라인 */
.line--load { color: var(--hz-quantum-dim); }
.line--load .dots::after { content: ''; animation: dots 1s steps(4, end) infinite; }
@keyframes dots { 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }

/* 구분선/블록 */
.line--rule { color: var(--hz-iron-hi); }
.block { margin: var(--sp-3) 0; }

/* ----- 하단 입력 행 ----- */
.term__prompt {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--hz-iron);
  background: var(--hz-slab);
}
.term__sigil { color: var(--hz-quantum); text-shadow: var(--glow-q-s); user-select: none; }
.term__input {
  flex: 1;
  background: transparent; border: 0; outline: none;
  color: var(--hz-text-hi);
  font-family: var(--font-term);
  font-size: var(--fs-14);
  letter-spacing: var(--tr-term);
  caret-color: var(--hz-quantum);
}
.term__input::placeholder { color: var(--hz-text-ghost); }

/* 깜빡이는 커서(입력 비활성/로딩 중 표시용) */
.cursor {
  display: inline-block; width: 8px; height: 1em;
  background: var(--hz-quantum); vertical-align: text-bottom;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ===== 반응형 ===== */
@media (max-width: 720px) {
  body { font-size: var(--fs-13); }
  .term__screen { padding: var(--sp-3) var(--sp-4); }
  .term__bar { gap: var(--sp-2); font-size: 10px; }
  .term__bar-hide { display: none; }
}

/* 접근성: 모션 감소 */
@media (prefers-reduced-motion: reduce) {
  .crt__flicker, .term__dot, .cursor, .line { animation: none; }
  .term__screen { scroll-behavior: auto; }
}