/* ============================================================
   theme.css
   ------------------------------------------------------------
   PJH Hub 다크 테마 디자인 시스템의 공통 토큰 + 베이스 리셋.
   index.html, profile.html, dm/index.html 등 동일한 팔레트를
   쓰는 페이지에서 공유한다. 페이지별 레이아웃 클래스(.shell 내부
   그리드/카드 등)는 각 파일의 <style>에 그대로 둔다 — 페이지마다
   .mark 크기 등 세부 수치가 달라 강제로 통합하면 오히려 깨진다.

   폰트: JetBrains Mono를 1순위로 쓰되, 한글 글리프가 없는 폰트라
   Pretendard를 폴백으로 둔다. CSS 폰트 폴백은 문자 단위로 동작하므로
   숫자/영문은 JetBrains Mono(고정폭 코딩 감성), 한글은 Pretendard로
   자동 전환되어 한 문장 안에서도 자연스럽게 섞인다.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/npm/jetbrains-mono@1.0.6/css/jetbrains-mono.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@latest/dist/web/static/pretendard.css');

:root {
  /* 네이비 톤 대신 순수 블랙에 가까운 중립 다크 팔레트 (파란기 최소화) */
  --bg: #09090a;
  --surface: #131315;
  --surface-2: #1a1a1d;
  --border: #29292c;
  --muted: #48484c;
  --sub: #8c8c91;
  --text: #e8e8ea;
  --mark-bg: #e8e8ea;
  --mark-fg: #09090a;

  /* 포인트 컬러 — 레벨/랭킹 1위 등 정말 중요한 항목에만 씀 */
  --accent: #00ff90;
  --accent-fg: #06120c;
  --accent-glow: rgba(0, 255, 144, 0.22);

  /* 고정폭(라벨/수치/코드) vs 가독성(본문 줄글) 이원화 */
  --font-mono: 'JetBrains Mono', 'Pretendard', 'Courier New', monospace;
  --font-sans: 'Pretendard', -apple-system, system-ui, sans-serif;
}

/* ── 라이트 테마 — 다크가 기본 정체성이라 옵트인으로만 존재.
   html 요소에 data-theme="light"가 붙으면(assets/theme-toggle.js) 이 값들로 덮어씀. ── */
:root[data-theme="light"] {
  --bg: #f5f5f4;
  --surface: #ffffff;
  --surface-2: #f0f0ee;
  --border: #d8d8d5;
  --muted: #9a9a96;
  --sub: #66665f;
  --text: #16161a;
  --mark-bg: #16161a;
  --mark-fg: #f5f5f4;

  --accent: #00a862;
  --accent-fg: #ffffff;
  --accent-glow: rgba(0, 168, 98, 0.18);
}

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

/* 키보드 포커스만 강조 표시 — 마우스 클릭 시 아웃라인은 그대로 숨김(:focus-visible 미매칭) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 카드/링크 호버 시 은은한 네온 테두리 글로우 — 클래스를 붙인 요소에만 적용 */
.pjh-glow-hover {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pjh-glow-hover:hover {
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .pjh-glow-hover, .pjh-glow-hover:hover { transition: none; transform: none; }
}

/* 모달/오버레이/탭 전환용 미세 페이드인 (0.18s) */
@keyframes pjh-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pjh-fade-in { animation: pjh-fade-in 0.18s ease; }
@media (prefers-reduced-motion: reduce) {
  .pjh-fade-in { animation: none; }
}

/* 대시보드풍 라벨 — 대문자 + 넓은 자간 */
.pjh-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
}