/* ── 전체 레이아웃 */
/* 별 배경 레이어 — 맨 뒤 */
#star-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #00000f;
}

/* 3D 그래프 — 별 위 (투명 배경) */
#graph-container {
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* 패널이 열렸을 때 그래프 영역 축소 — JS에서 클래스 토글 */
body.panel-open #graph-container {
  right: var(--panel-w);
  transition: right var(--t-slow);
}

/* 로딩 오버레이 */
#loading {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, #0c0d20 0%, #07080f 65%);
  gap: var(--sp-4);
  overflow: hidden;
}

#loading.hidden { display: none; }

@keyframes stars-twinkle {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.65; }
}

.loading-logo {
  position: relative;
  font-size: 26px;
  font-weight: var(--weight-bold);
  letter-spacing: 8px;
  color: rgba(210,225,255,0.88);
  text-shadow: 0 0 24px rgba(100,140,255,0.45), 0 0 60px rgba(100,140,255,0.18);
  animation: logo-pulse 3.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes logo-pulse {
  0%,100% { text-shadow: 0 0 24px rgba(100,140,255,0.45), 0 0 60px rgba(100,140,255,0.18); }
  50%      { text-shadow: 0 0 36px rgba(130,160,255,0.65), 0 0 80px rgba(100,140,255,0.28); }
}

.loading-tagline {
  font-size: 12px;
  color: rgba(160,196,255,0.38);
  letter-spacing: 0.12em;
  margin-top: 4px;
  margin-bottom: 4px;
  z-index: 1;
}

/* 네뷸라 글로우 */
.loading-nebula {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(70,50,180,0.1) 0%, rgba(40,30,120,0.05) 45%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: nebula-breathe 5s ease-in-out infinite;
}
@keyframes nebula-breathe {
  0%,100% { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.08); }
}

/* 궤도 링 */
.loading-orbit {
  position: absolute;
  width: 180px; height: 60px;
  border: 1px solid rgba(100,140,255,0.12);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotateX(75deg);
  pointer-events: none;
  animation: orbit-spin 5s linear infinite;
}
.loading-orbit::after {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  background: rgba(160,200,255,0.85);
  border-radius: 50%;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(160,200,255,0.9), 0 0 16px rgba(100,140,255,0.5);
}
@keyframes orbit-spin {
  from { transform: translate(-50%,-50%) rotateX(75deg) rotateZ(0deg); }
  to   { transform: translate(-50%,-50%) rotateX(75deg) rotateZ(360deg); }
}

/* ── 행성 생성 알림 피드 */
#feed-container {
  position: fixed;
  left: 16px;
  bottom: 20px;
  z-index: 400;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

.feed-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 10, 32, 0.92);
  border: 1px solid rgba(100, 140, 255, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 220px;
  max-width: 280px;
  backdrop-filter: blur(8px);
  pointer-events: auto;
  cursor: pointer;
  animation: feed-in 0.35s ease;
  transition: opacity 0.5s ease;
}

.feed-toast.fade-out { opacity: 0; }

.feed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.feed-text { flex: 1; }
.feed-title { font-size: 12px; font-weight: 600; color: #e0e8ff; }
.feed-sub { font-size: 11px; color: rgba(160,196,255,0.5); margin-top: 2px; }

@keyframes feed-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 별똥별 — 우측상단 → 좌측하단 */
.loading-meteor {
  position: absolute;
  left: 100%;
  width: 120px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(to left, transparent 0%, rgba(180,210,255,0.4) 50%, rgba(230,240,255,0.92) 100%);
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(180,210,255,0.55));
  opacity: 0;
}

.loading-meteor::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(240,248,255,1);
  border-radius: 50%;
  left: -1px;
  top: -1px;
  box-shadow: 0 0 5px rgba(200,225,255,0.9), 0 0 10px rgba(160,200,255,0.5);
}

/* 별똥별 래퍼 */
.loading-meteors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 우측 상단 → 좌하단 */
.loading-meteor:nth-child(1) { top:  5%; animation: meteor 3.6s ease-out infinite 0.0s; }
.loading-meteor:nth-child(2) { top: 18%; animation: meteor 3.6s ease-out infinite 0.7s; }
.loading-meteor:nth-child(3) { top: 30%; animation: meteor 3.6s ease-out infinite 1.4s; }
.loading-meteor:nth-child(4) { top: 44%; animation: meteor 3.6s ease-out infinite 2.1s; }
.loading-meteor:nth-child(5) { top: 58%; animation: meteor 3.6s ease-out infinite 2.8s; }
.loading-meteor:nth-child(6) { top: 12%; animation: meteor 3.6s ease-out infinite 3.5s; }
.loading-meteor:nth-child(7) { top: 72%; animation: meteor 3.6s ease-out infinite 0.3s; }
/* 상단 중앙 구간 → 좌하단 */
.loading-meteor:nth-child(8)  { top: 0; left: 28%; animation: meteor 3.6s ease-out infinite 1.0s; }
.loading-meteor:nth-child(9)  { top: 0; left: 48%; animation: meteor 3.6s ease-out infinite 2.2s; }
.loading-meteor:nth-child(10) { top: 0; left: 65%; animation: meteor 3.6s ease-out infinite 3.8s; }

@keyframes meteor {
  0%   { transform: rotate(-32deg) translateX(300px); opacity: 0; }
  5%   { opacity: 1; }
  75%  { opacity: 0.8; }
  100% { transform: rotate(-32deg) translateX(-2200px); opacity: 0; }
}

/* ── 실시간 사이드바 */
#live-sidebar {
  position: fixed;
  left: 16px;
  top: 100px;
  bottom: 16px;
  z-index: 300;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
#live-sidebar::-webkit-scrollbar { display: none; }

body.panel-open #live-sidebar {
  opacity: 0.4;
}

.sidebar-section {
  background: rgba(8, 8, 28, 0.82);
  border: 1px solid rgba(100, 140, 255, 0.15);
  border-radius: 10px;
  padding: 10px 12px;
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.sidebar-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(160, 196, 255, 0.6);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.sidebar-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-list li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(100, 140, 255, 0.06);
  cursor: pointer;
  transition: background 0.15s;
}

.sidebar-list li:last-child { border-bottom: none; }

.sidebar-list li:hover .sb-name {
  color: #a0c4ff;
}

.trending-ticker {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0 2px;
  cursor: pointer;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.trending-ticker.slide-out {
  transform: translateY(-8px);
  opacity: 0;
}

.trending-ticker.slide-from-bottom {
  transform: translateY(8px);
  opacity: 0;
  transition: none;
}

.ticker-rank {
  font-size: 10px;
  font-weight: 700;
  color: rgba(100, 140, 255, 0.5);
  min-width: 14px;
  text-align: right;
  flex-shrink: 0;
}

.ticker-name {
  font-size: 12px;
  color: #c8d8f8;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticker-views {
  font-size: 10px;
  color: rgba(160, 196, 255, 0.35);
  flex-shrink: 0;
}

/* ── 특수 행성 드롭다운 */
.special-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

.special-hdr.open {
  margin-bottom: 8px;
}

.special-arrow {
  font-size: 10px;
  color: rgba(160, 196, 255, 0.4);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.special-hdr.open .special-arrow {
  transform: rotate(180deg);
}

.special-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.special-menu.open {
  max-height: 240px;
}

.special-type-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.special-type-list li {
  font-size: 12px;
  color: #c8d8f8;
  padding: 5px 2px;
  cursor: pointer;
  border-bottom: 1px solid rgba(100, 140, 255, 0.06);
  transition: color 0.15s;
}

.special-type-list li:last-child { border-bottom: none; }

.special-type-list li:hover { color: #a0c4ff; }

.special-back {
  font-size: 11px;
  color: rgba(160, 196, 255, 0.45);
  cursor: pointer;
  margin-bottom: 6px;
  transition: color 0.15s;
}

.special-back:hover { color: #a0c4ff; }

.special-results-title {
  font-size: 11px;
  color: rgba(160, 196, 255, 0.5);
  margin-bottom: 6px;
}

.sidebar-title [class*="ph-"],
.special-type-list li [class*="ph-"] {
  font-size: 13px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

#special-results-list {
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 140, 255, 0.2) transparent;
}

#special-results-list::-webkit-scrollbar {
  width: 3px;
}

#special-results-list::-webkit-scrollbar-track {
  background: transparent;
}

#special-results-list::-webkit-scrollbar-thumb {
  background: rgba(100, 140, 255, 0.2);
  border-radius: 2px;
}

#recent-list {
  max-height: 160px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 140, 255, 0.2) transparent;
}

#recent-list::-webkit-scrollbar {
  width: 3px;
}

#recent-list::-webkit-scrollbar-track {
  background: transparent;
}

#recent-list::-webkit-scrollbar-thumb {
  background: rgba(100, 140, 255, 0.2);
  border-radius: 2px;
}

.sb-name {
  font-size: 12px;
  color: #c8d8f8;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-meta {
  font-size: 10px;
  color: rgba(160, 196, 255, 0.35);
  flex-shrink: 0;
}

.sb-new-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(80, 220, 140, 0.7);
  flex-shrink: 0;
  animation: new-pulse 2s ease-in-out infinite;
}
@keyframes new-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}