/* UCARETRON — The Signal Path (스크롤 구동 3D 점군 익스플로러)
   원형: data_clouds_global/explore.css · UCARETRON 토큰 계열로 재조정 */
body, html { margin: 0; padding: 0; background: #04070d; color: #fff;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 18px; background: #f0f2f4; color: #0b1017;
  font-weight: 700; border-radius: 0 0 10px 10px;
  transition: top .16s ease; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ---- 로더 ---- */
#loader {
  position: fixed; inset: 0; z-index: 50;
  background: #04070d;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-inner { width: min(420px, 70vw); text-align: center; }
.loader-title { letter-spacing: 0.34em; font-weight: 600; font-size: 0.95rem; margin-bottom: 22px; }
.loader-bar { height: 2px; background: rgba(255,255,255,0.12); overflow: hidden; border-radius: 2px; }
#loader-fill { height: 100%; width: 0%; background: linear-gradient(90deg,#9c77cd,#ca9bfe); transition: width 0.25s; }
.loader-pct { margin-top: 12px; font-size: 0.8rem; opacity: 0.6; letter-spacing: 0.2em; }

/* ---- 캔버스/비네트 ---- */
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 46%, rgba(2,5,12,0.72) 100%);
}

/* ---- 내비 ---- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 30px; font-size: 0.78rem; letter-spacing: 0.16em;
}
nav a { color: #fff; text-decoration: none; }
nav a.back:hover { color: #ca9bfe; }
.nav-title { font-weight: 600; }
.nav-hint { opacity: 0.65; }

/* ---- HUD ---- */
#hud { position: fixed; bottom: 26px; left: 30px; right: 30px; z-index: 3; }
.hud-progress { height: 2px; background: rgba(255,255,255,0.14); border-radius: 2px; overflow: hidden; }
#hud-fill { height: 100%; width: 0%; background: linear-gradient(90deg,#9c77cd,#ca9bfe 55%,#ebbb74); }
.hud-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 9px;
  font-size: 0.72rem; letter-spacing: 0.14em; opacity: 0.78; }
#hud-stage { color: #ca9bfe; font-weight: 600; }
.hud-meta span:nth-child(2) { opacity: 0.6; font-size: 0.62rem; }

/* 시각 없는 h1 — SEO·스크린리더용 (스토리 플로우 방해 않음) */
.sr-title {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- 스크롤 블록 ---- */
#scrolly { position: relative; z-index: 2; }
.spacer { height: 55vh; }
.block {
  min-height: 46vh;
  display: flex; align-items: center;
  padding: 6vh 8vw;
  opacity: 0; transform: translateY(34px);
  transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease;
  filter: blur(4px);
}
.block.visible { opacity: 1; transform: none; filter: none; }
.block p {
  max-width: 620px; margin: 0;
  font-size: clamp(1.1rem, 2.3vw, 1.5rem);
  font-weight: 300; line-height: 1.65;
}
.block strong { font-weight: 600; color: #ca9bfe; }
.block .final { text-align: center; margin: 0 auto; font-size: clamp(1.4rem, 3.2vw, 2.2rem); }

/* ---- 창문 카드 — 랜딩 필드 덱과 통일된 언어 (이 페이지는 style.css 를
        로드하지 않으므로 같은 시각 언어를 자체 규칙으로 재구현한다) ---- */
.fw-pane {
  max-width: 660px;
  border: 1px solid rgba(202, 155, 254, 0.22);
  border-radius: 18px;
  background: rgba(8, 12, 19, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.5rem 1.8rem 1.35rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  transition: border-color .5s ease, box-shadow .5s ease;
}
/* 등장 완료 = 초점: 랜딩 덱의 is-focus 글로우와 동일한 문법 */
.block.visible .fw-pane {
  border-color: rgba(202, 155, 254, 0.5);
  box-shadow:
    0 0 0 1px rgba(202, 155, 254, 0.16),
    0 24px 70px rgba(0, 0, 0, 0.5),
    0 0 90px rgba(202, 155, 254, 0.10);
}
.fw-pane .fw-idx {
  display: block;
  margin-bottom: .6rem;
  font-family: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .68rem; letter-spacing: .22em;
  color: #ca9bfe;
}
.fw-pane .fw-tag {
  display: inline-block;
  margin-top: 1.05rem;
  padding: .24rem .7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  font-family: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .62rem; letter-spacing: .06em;
  color: rgba(240, 242, 244, 0.66);
}
.block:nth-of-type(even) .fw-pane { margin-left: auto; }
.fw-pane--center { margin-inline: auto; text-align: center; }

@media (max-width: 720px) {
  .nav-hint { display: none; }
  .block { padding: 6vh 7vw; }
  .hud-meta span:nth-child(2) { display: none; }
}
/* ----------------------------------------------------
   REDUCED MOTION — OS "동작 줄이기" 설정 존중
---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .block { opacity: 1 !important; transform: none !important; filter: none !important; }
}