/* ============================================================
   CoinLAB 공용 효과 (coinlab-fx.css)
   ------------------------------------------------------------
   왜 이 파일이 있나:
     배경(성운) · 별 입자 · 카드 광채/호버를 화면마다 베껴 두면
     하나 고칠 때 전부 손봐야 한다. 그래서 효과를 이 한 곳에 모아
     모든 화면(index/detail/법적/편지지)이 link 한 줄로 가져다 쓴다.
     → 한 번 고치면 전 화면 자동 통일.

   적용 대상:
     배경/별  = 모든 화면(body)
     카드 효과 = .card(메인) + .panel(상세·법적) 둘 다 한 셀렉터로 커버.
                두 클래스는 헤어라인/광채/호버가 원래 쌍둥이라 그대로 합침.

   이 파일은 각 HTML의 <style> '뒤'(</head> 직전)에서 불러야
   기존에 박혀 있던 옛 효과를 덮어써서 통일이 보장된다.
   ============================================================ */


/* ── ① Deep Space 배경 ──────────────────────────────────────
   단색은 밋밋하다. 보라·푸름·금빛 성운을 여러 겹 깔아 '깊이'를 준다.
   fixed라 스크롤해도 배경은 가만히 있어 우주 위를 떠다니는 느낌. */
body {
  background:
    radial-gradient(ellipse 90% 60% at 12% -12%, rgba(112,100,172,.22), transparent 56%),
    radial-gradient(ellipse 70% 50% at 96%   4%, rgba(126,184,212,.13), transparent 52%),
    radial-gradient(ellipse 85% 70% at 50% 122%, rgba(200,168,130,.13), transparent 60%),
    #06070b;
  background-attachment: fixed;
}


/* ── ② 별 입자 레이어 ───────────────────────────────────────
   콘텐츠 뒤(z-index:0)에 깔리는 별빛. 140초에 걸쳐 아주 천천히 흘러
   '살아있는 우주' 느낌을 낸다. pointer-events:none이라 클릭은 통과. */
html { overflow-x: hidden; }   /* 별 배경이 화면 밖으로 새는 가로 스크롤 차단 */

body::before {
  content: "";
  position: fixed;
  inset: 0;               /* 화면에 딱 맞춤 — 삐져나와 빈 공간 만들던 것 차단 */
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(1.4px 1.4px at  40px  60px, rgba(255,255,255,.70), transparent),
    radial-gradient(1px   1px   at 130px 200px, rgba(255,255,255,.50), transparent),
    radial-gradient(1.2px 1.2px at 230px 120px, rgba(219,196,168,.60), transparent),
    radial-gradient(1px   1px   at 320px 280px, rgba(255,255,255,.45), transparent),
    radial-gradient(1.3px 1.3px at  90px 330px, rgba(255,255,255,.55), transparent),
    radial-gradient(1px   1px   at 360px  40px, rgba(126,184,212,.55), transparent),
    radial-gradient(1.1px 1.1px at 200px 360px, rgba(255,255,255,.40), transparent),
    radial-gradient(1px   1px   at 280px 180px, rgba(255,255,255,.50), transparent);
  background-repeat: repeat;
  background-size: 400px 400px;
  animation: fxDrift 140s linear infinite;
}

/* 별이 좌상단으로 한 타일(400px)만큼 흐른 뒤 반복(타일이 repeat라 끊김 없음). */
@keyframes fxDrift {
  from { background-position: 0 0; }
  to   { background-position: -400px -400px; }
}


/* ── ③ 콘텐츠를 별 위로 ─────────────────────────────────────
   .wrap(가운데 정렬 액자)을 별보다 위(z-index:1)로 띄워 글이 안 가린다.
   법적 페이지엔 이 규칙이 없어 별을 깔면 글이 묻힐 수 있어 여기서 보장. */
.wrap {
  position: relative;
  z-index: 1;
}


/* ── ④ 카드/패널 공통 베이스 ───────────────────────────────
   광채(::after)·헤어라인(::before)을 카드 안에 정확히 앉히려면
   position:relative가 필요. 호버 강조가 '뚝'이 아니라 부드럽게
   번지도록 transition도 공통으로 보장(법적 패널엔 원래 없었음). */
.card, .panel {
  position: relative;
  transition: border-color .25s, box-shadow .25s;
}
/* 목록 카드(.gcard)는 자체 호버(테두리+떠오름)가 따로 있어 베이스 transition은
   건드리지 않고, 광채를 앉힐 position만 보장한다. */
.gcard { position: relative; }


/* ── ⑤ 윗변 골드 헤어라인 ──────────────────────────────────
   카드 위쪽에 흐르는 얇은 금빛 선. 유리에 비친 빛줄기 같은 디테일. */
.card::before,
.panel::before,
.gcard::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,130,.5), transparent);
  z-index: 2;
}


/* ── ⑥ 마우스 광채(spotlight) ──────────────────────────────
   카드 위에서 마우스를 따라 골드 빛이 스친다.
   좌표(--mx/--my)는 coinlab-fx.js가 마우스 움직임에 맞춰 넣어준다.
   pointer-events:none이라 클릭·차트 툴팁은 그대로 통과. */
.card::after,
.panel::after,
.gcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;       /* 카드 둥근 모서리에 맞춰 빛도 둥글게 */
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -20%),
                rgba(200,168,130,.12), transparent 60%);
  opacity: 0;                   /* 평소엔 숨김 → 호버 때만 켬 */
  transition: opacity .4s;
  pointer-events: none;
  z-index: 1;
}
.card:hover::after,
.panel:hover::after,
.gcard:hover::after {
  opacity: 1;
}


/* ── ⑦ 호버 강조 ───────────────────────────────────────────
   커서를 올리면 테두리가 금빛으로, 그림자가 깊어져 '떠 있는' 느낌. */
.card:hover,
.panel:hover {
  border-color: rgba(200,168,130,.38);
  box-shadow:
    0 24px 56px rgba(0,0,0,.55),
    0 0 44px rgba(200,168,130,.10),
    inset 0 1px 0 rgba(255,255,255,.14);
}


/* ── ⑧ 공용 스크롤바 — 우주 컨셉에 맞춘 얇은 골드 톤 ──────────
   기본 흰색 스크롤바가 어두운 배경에서 너무 튀어, 전 화면 통일.
   Firefox(scrollbar-*) + Chrome/Safari(::-webkit-*) 양쪽 커버. */
* {
  scrollbar-width: thin;                          /* Firefox: 얇게 */
  scrollbar-color: rgba(200,168,130,.35) transparent;  /* 막대=골드, 트랙=투명 */
}
::-webkit-scrollbar { width: 10px; height: 10px; }        /* Chrome/Safari 두께 */
::-webkit-scrollbar-track { background: transparent; }    /* 트랙은 배경에 녹임 */
::-webkit-scrollbar-thumb {
  background: rgba(200,168,130,.30);              /* 막대 = 은은한 골드 */
  border-radius: 8px;
  border: 2px solid transparent;                 /* 막대 양옆 여백(가늘어 보임) */
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(200,168,130,.55); }  /* 호버 시 살짝 진하게 */