/* =========================================================
   PULSAR — Brand tokens & primitives
   Refined monochrome system (no purple)
   v2.0 · 2026
   ========================================================= */

/* Fonts: Pretendard Variable로 단일화. 로컬 woff2는 next/font/local로
   --font-sans-kr 변수로 등록되어 있음 (app/layout.tsx). */

:root {
  /* ── LIGHT (Snow Pro) — design-drafts-v5/01-snow-pro.html이 기준 ──
     apple.com/Health 계열 라이트. 배경은 물러나고 숫자가 전면에. */

  /* — Surfaces — */
  --pulsar-bg:           #F5F5F7;   /* page bg */
  --pulsar-surface:      #FFFFFF;   /* card */
  --pulsar-surface-2:    #F5F5F7;   /* panel header, inset */
  --pulsar-hairline:     rgba(0,0,0,0.08);
  --pulsar-hairline-soft: rgba(0,0,0,0.05);

  /* — Ink — */
  --pulsar-ink:          #1D1D1F;   /* primary text & black mark */
  --pulsar-ink-soft:     #3F3F44;
  --pulsar-mute:         #6E6E73;   /* muted text */
  --pulsar-mute-soft:    #AEAEB2;

  /* — Brand — */
  --pulsar-primary:      #1D1D1F;   /* the mark color */
  --pulsar-on-primary:   #FFFFFF;

  /* — Accent — */
  --pulsar-accent:          #0071E3;  /* Apple system blue */
  --pulsar-on-accent:       #FFFFFF;  /* 액센트 표면 위 글자 */

  /* — Control fill —
     버튼·세그먼트·토글처럼 '채워진 컨트롤'의 바탕. 페이지 배경(--pulsar-bg)을
     그대로 쓰면 안 된다 — 배경 위에서는 아예 안 보이고, 흰 카드 위에서는 그냥
     탁한 회색 덩어리로 읽힌다(라이트에서 촌스러워 보이던 원인).
     애플 시스템 색과 같은 방식으로 배경보다 한 단계 진한 별도 톤을 두고,
     순회색 대신 아주 옅은 푸른 기운을 넣어 차갑게 죽지 않게 한다. */
  --pulsar-fill:          #ECECF1;
  --pulsar-fill-hover:    #E4E4EC;
  --pulsar-fill-active:   #DADAE4;

  /* 세그먼트 선택 표시 — 검게 칠하지 않는다. 회색 트랙 위로 흰 판이 떠오르는
     방식이 애플의 세그먼트 컨트롤이고, 검정 채움보다 훨씬 가볍게 읽힌다. */
  --pulsar-segment-on:        #FFFFFF;
  --pulsar-segment-on-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 1px rgba(0,0,0,0.04);

  /* — Type — Pretendard Variable 단일 패밀리. mono도 동일 폰트 사용
     (코드/숫자 정렬은 Tailwind tabular-nums 클래스로 대응). */
  --pulsar-font-display: 'Pretendard Variable', var(--font-sans-kr), system-ui, sans-serif;
  --pulsar-font-body:    'Pretendard Variable', var(--font-sans-kr), system-ui, sans-serif;
  --pulsar-font-mono:    'Pretendard Variable', var(--font-sans-kr), ui-monospace, monospace;

  /* — Radii — A/B 시안의 부드러운 애플 곡률 */
  --pulsar-radius-sm: 6px;
  --pulsar-radius-md: 8px;
  --pulsar-radius-lg: 12px;
  /* 카드·패널 곡률. 14 → 16 (2026-09-04): 참고한 토스증권 웹이 카드·모달을
     16 안팎으로 두는데, 14 는 그보다 한 단계 각져 보였다. 컨트롤(8)과의 위계는
     그대로 유지된다. .pulsar-card 단일 소스 (globals.css가 참조). */
  --pulsar-radius-card: 16px;

  /* — Spacing scale — */
  --pulsar-space-1: 4px;
  --pulsar-space-2: 8px;
  --pulsar-space-3: 12px;
  --pulsar-space-4: 16px;
  --pulsar-space-5: 24px;
  --pulsar-space-6: 32px;
  --pulsar-space-7: 48px;
  --pulsar-space-8: 64px;

  /* — Popover (dropdown, listbox, autocomplete 등 floating panel용) —
     라이트: 불투명 흰 패널 + 부드러운 그림자. 유리 아님. */
  --pulsar-popover-bg:     #FFFFFF;
  --pulsar-popover-border: rgba(0,0,0,0.08);
  --pulsar-popover-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --pulsar-popover-blur:   none;

  /* — Card — */
  --pulsar-card-shadow:  0 1px 2px rgba(0, 0, 0, 0.04);

  /* — GNB bar — 앱에서 유일하게 반투명+blur을 유지하는 표면(시안 A/B 공통).
     스크롤되는 콘텐츠가 바 아래로 지나가는 느낌은 남기되, 불투명도를 충분히
     높여 메뉴 글자 대비가 흔들리지 않게 한다. */
  --pulsar-gnb-bg:     rgba(255, 255, 255, 0.82);
  --pulsar-gnb-border: rgba(0, 0, 0, 0.08);
  --pulsar-gnb-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* =========================================================
   PULSAR — DARK (Graphite Pro) tokens
   v4.0 · 2026 — design-drafts-v5/02-graphite.html이 기준.
   Final Cut·Logic 계열의 중성 다크. 유리(반투명·blur) 아님 — 불투명 패널.
   ========================================================= */
[data-theme="dark"] {
  /* — Ink (white hierarchy) — */
  --pulsar-ink:          rgba(255,255,255,0.92);
  --pulsar-ink-soft:     rgba(255,255,255,0.78);
  --pulsar-mute:         rgba(255,255,255,0.55);
  --pulsar-mute-soft:    rgba(255,255,255,0.32);

  /* — Surfaces (불투명) — */
  --pulsar-bg:           #161618;
  --pulsar-surface:      #1E1E21;
  --pulsar-surface-2:    #232327;
  --pulsar-hairline:     rgba(255,255,255,0.09);
  --pulsar-hairline-soft: rgba(255,255,255,0.06);

  /* — Logo / brand — */
  --pulsar-primary:      #F5F5F7;
  --pulsar-on-primary:   #161618;

  /* — Accent — */
  --pulsar-accent:          #0A84FF;  /* 다크용 system blue */
  --pulsar-on-accent:       #FFFFFF;

  /* — Control fill (다크) — 라이트와 같이 불투명 고정값으로 둔다.
     반투명으로 두면 카드(#1E1E21) 위와 페이지 배경(#161618) 위에서 다른 색이 되어
     같은 컨트롤이 화면마다 달라 보인다. */
  --pulsar-fill:          #2C2C31;
  --pulsar-fill-hover:    #35353B;
  --pulsar-fill-active:   #3E3E45;

  --pulsar-segment-on:        #48484E;
  --pulsar-segment-on-shadow: 0 1px 3px rgba(0,0,0,0.45);

  /* — Popover: 불투명 그라파이트 패널 — */
  --pulsar-popover-bg:     #232327;
  --pulsar-popover-border: rgba(255, 255, 255, 0.12);
  --pulsar-popover-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --pulsar-popover-blur:   none;

  /* — Card: 다크는 그림자 없음(헤어라인만) — */
  --pulsar-card-shadow:  none;

  /* — GNB bar (다크) — */
  --pulsar-gnb-bg:     rgba(24, 24, 26, 0.88);
  --pulsar-gnb-border: rgba(255, 255, 255, 0.09);
  --pulsar-gnb-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}


/* — Wordmark — */
.pulsar-wordmark {
  font-family: var(--pulsar-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pulsar-ink);
}

.pulsar-wordmark--lg { font-size: 28px; letter-spacing: 0.06em; }
.pulsar-wordmark--md { font-size: 18px; letter-spacing: 0.05em; }
.pulsar-wordmark--sm { font-size: 13px; letter-spacing: 0.08em; }

/* — Eyebrow / caption (mono, tracked) — */
.pulsar-eyebrow {
  font-family: var(--pulsar-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pulsar-mute);
}

/* — Pulse animation (drop on the mark's core) — */
@keyframes pulsar-blink {
  0%, 65%, 100% { opacity: 1; }
  72%, 78%      { opacity: 0.18; }
}
.pulsar-pulse { animation: pulsar-blink 1.4s ease-in-out infinite; }

/* — Button (primary) — */
/* 대문자 + 자간 0.16em 이라 한글이 벌어져 보였고, 앱의 다른 주 버튼
   (h-11 px-4 rounded-lg text-body-sm font-medium bg-accent)과 따로 놀았다.
   여기(토큰) 한 곳을 맞춰 로그인·Bets·페르소나를 한꺼번에 정렬한다(2026-09-10). */
.pulsar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 16px;
  background: var(--pulsar-accent);
  color: var(--pulsar-on-accent);
  border: none; border-radius: 8px;
  font-family: var(--pulsar-font-body);
  font-weight: 500; font-size: 14px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.pulsar-btn:hover { opacity: 0.85; }

.pulsar-btn--ghost {
  background: transparent;
  color: var(--pulsar-ink);
  border: 1px solid var(--pulsar-hairline);
}

/* — Input —
   밑줄형이었다. 앱의 나머지 입력창은 전부 테두리 박스라 로그인·아하 모먼트·
   Bets·페르소나 네 화면만 다른 물건처럼 보였다. 여기(토큰) 한 곳을 고쳐
   네 화면을 한꺼번에 맞춘다(2026-09-07). */
.pulsar-input {
  width: 100%; height: 44px;
  background: var(--pulsar-surface);
  border: 1px solid var(--pulsar-hairline);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--pulsar-ink);
  font-family: var(--pulsar-font-body);
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease;
}
.pulsar-input:focus { border-color: var(--pulsar-focus); }
.pulsar-input::placeholder { color: var(--pulsar-mute); }

/* 라벨도 같은 이유로 — 대문자 자간 라벨은 이 네 화면에만 있었다. */
.pulsar-label {
  display: block;
  font-family: var(--pulsar-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--pulsar-ink-soft);
  margin-bottom: 6px;
}

/* — Card — */
.pulsar-card {
  background: var(--pulsar-surface);
  border: 1px solid var(--pulsar-hairline-soft);
  /* radius 단일 소스 — globals.css 의 .pulsar-card 와 같은 토큰을 읽어야 한다.
     여기서 --pulsar-radius-md(8px)를 쓰던 탓에, 로드 순서에 따라 이 규칙이
     globals.css(14px)를 이겨 카드가 8px 로 렌더됐다(2026-08-25 실측). */
  border-radius: var(--pulsar-radius-card);
  padding: var(--pulsar-space-6);
}

/* — Hairline grid (for dashboards) — */
.pulsar-hairline-grid {
  display: grid; gap: 1px;
  background: var(--pulsar-hairline);
  border: 1px solid var(--pulsar-hairline);
}
.pulsar-hairline-grid > * {
  background: var(--pulsar-surface);
  padding: var(--pulsar-space-5);
}

/* — Sidebar nav item (left-border active state) — */
.pulsar-nav-item {
  display: block;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--pulsar-mute);
  border-left: 2px solid transparent;
  text-decoration: none;
}
.pulsar-nav-item--active {
  color: var(--pulsar-ink);
  font-weight: 500;
  border-left-color: var(--pulsar-ink);
}

/* — Display number (stat / metric) — */
.pulsar-stat {
  font-family: var(--pulsar-font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--pulsar-ink);
}