/* ==========================================================================
   웹폰트 — 로컬 호스팅.
   heal7 CSP는 font-src 'self'로 잠겨 있어 Google Fonts가 통째로 차단된다.
   CSP를 푸는 대신 폰트를 가져왔다 (.www/<service>/ 자기완결 원칙).
   Pretendard는 가변폰트 + KS X 1001 상용 2350자 서브셋 = 470KB로 모든 굵기 커버.
   ========================================================================== */
@font-face {
  font-family: 'Pretendard';
  src: url('../assets/fonts/pretendard-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/outfit.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* ==========================================================================
   명리학 × 연애 시그널 : 사주는 핑계고, 사실 알고 싶은 건 연애잖아 💕
   DESIGN SYSTEM & 1:1 PIXEL-PERFECT STYLESHEET
   ========================================================================== */

:root {
  --bg-page: #070220;
  --bg-box: #0c0528;
  --bg-card: #10072b;
  --bg-card-inner: #08031e;
  
  --border-box-purple: #4a1b6d;
  --border-box-bright: #662d8c;
  --border-pink: #d240b3;
  --border-purple: #8338ec;
  --border-cyan: #00f0ff;
  
  /* 정본 이미지 샘플링 기반 딥 마젠타 핑크 (과도한 형광색 지양) */
  --neon-pink: #cb23a2;
  --neon-hotpink: #b8156c;
  --neon-purple: #8338ec;
  --neon-cyan: #00e5ff;
  --neon-yellow: #ffe600;
  --neon-lime: #00ffa3;
  /* 글자 전용 잉크 — 배경용 네온(분홍·보라)은 흰 글자를 올려야 해서 어둡고, 글자로 쓰면 어두운 바탕에서 흐려진다.
     글자색은 이 잉크를 쓴다(대비 4.5:1 이상). */
  --pink-ink: #e25cc0;
  --purple-ink: #b38cff;
  
  --text-pure: #ffffff;
  --text-sub: #dccae9;
  --text-muted: #9c88b8;
  --text-on-neon: #ffffff;
  --text-on-cyan: #000000;
  --hero-text: #dccae9;
  --hero-accent: #00e5ff;

  /* 표면 */
  --bg-input: #13072e;
  --bg-cell: #170a36;
  --bg-glass: rgba(12, 5, 38, 0.88);
  --bg-nav: rgba(7, 2, 32, 0.7);
  --bg-nav-pill: rgba(14, 6, 42, 0.75);
  --bg-bar: rgba(12, 5, 38, 0.95);
  --bg-veil: rgba(7, 2, 32, 0.6);
  --bg-insight-a: #170a36;
  --bg-insight-b: #0f0524;

  /* 보더 */
  --border-soft: #4a1b6d;
  --border-input: #5a1e7d;
  --border-hair: #2f104d;

  /* 게이지·히트맵 */
  --gauge-track: #230c3d;
  --hm-empty: #170a36;
  --hm-1: #4a1b6d;
  --hm-2: #8338ec;

  /* 그림자 */
  --shadow-card: rgba(0, 0, 0, 0.65);
  --shadow-box: rgba(0, 0, 0, 0.75);
  --shadow-deep: rgba(0, 0, 0, 0.85);

  --font-main: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-display: 'Outfit', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  
  --glow-pink: 0 0 20px rgba(203, 35, 162, 0.5);
  --glow-purple: 0 0 20px rgba(131, 56, 236, 0.4);
}

/* Pearl-Daylight Mode — 화이트/로즈 펄 기반의 밝은 반전 테마.
   다크의 형광색을 그대로 올리지 않고 명도를 낮춘 잉크 계열로 바꿔 대비를 확보한다.
   여기 빠진 토큰이 곧 "반전 안 되는 자리"가 되므로 목록을 1:1로 유지할 것. */
html[data-theme="light"],
body.theme-bubblegum {
  color-scheme: light;
  --bg-page: #fbf8fc;
  --bg-box: rgba(255, 255, 255, 0.94);
  --bg-card: #ffffff;
  --bg-card-inner: #f6f0f8;
  --border-box-purple: #d7c5df;
  --border-box-bright: #bda2ca;
  --border-pink: #b54884;
  --border-purple: #7652a5;
  --border-cyan: #2a7d88;

  --text-pure: #28152f;
  --text-sub: #51365c;
  --text-muted: #715b78;
  --text-on-neon: #ffffff;
  --text-on-cyan: #ffffff;
  --hero-text: #28152f;
  --hero-accent: #006f82;

  --bg-input: #fffafd;
  --bg-cell: #f1e8f4;
  --bg-glass: rgba(255, 252, 255, 0.92);
  --bg-nav: rgba(255, 252, 255, 0.92);
  --bg-nav-pill: rgba(246, 239, 249, 0.92);
  --bg-bar: rgba(255, 252, 255, 0.97);
  --bg-veil: rgba(251, 248, 252, 0.78);
  --bg-insight-a: #f8f1fa;
  --bg-insight-b: #efe5f3;

  --border-soft: #ddcfe3;
  --border-input: #bea9c8;
  --border-hair: #eadfeb;

  --gauge-track: #e7dce9;
  --hm-empty: #eee5f0;
  --hm-1: #d3bfdc;
  --hm-2: #9b78b2;

  --shadow-card: rgba(64, 30, 72, 0.11);
  --shadow-box: rgba(64, 30, 72, 0.14);
  --shadow-deep: rgba(45, 18, 54, 0.2);

  /* 밝은 표면용 브랜드 잉크: 일반 텍스트 크기에서도 WCAG AA를 목표로 한다. */
  --neon-pink: #a51d70;
  --neon-hotpink: #9b174f;
  --neon-purple: #6035a5;
  --neon-cyan: #006f82;
  --neon-yellow: #765500;
  --neon-lime: #087449;
  --pink-ink: #a51d70;
  --purple-ink: #6035a5;

  --glow-pink: 0 8px 24px rgba(165, 29, 112, 0.16);
  --glow-purple: 0 8px 24px rgba(96, 53, 165, 0.15);
}

/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-page);
  color: var(--text-pure);
  font-family: var(--font-main);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  position: relative;
  word-break: keep-all; /* 한글은 어절 단위로 줄바꿈 */
}

/* Ambient Background Lights */
.ambient-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  animation: floatAmbient 12s infinite alternate ease-in-out;
}
.glow-1 { width: 600px; height: 600px; background: var(--neon-pink); top: -100px; left: 10%; }
.glow-2 { width: 700px; height: 700px; background: var(--neon-purple); top: 40%; right: -100px; animation-delay: -4s; }
.glow-3 { width: 500px; height: 500px; background: var(--neon-cyan); bottom: 0; left: 20%; animation-delay: -8s; }

@keyframes floatAmbient {
  0% { transform: scale(0.9) translate(0, 0); }
  100% { transform: scale(1.15) translate(30px, 20px); }
}

/* 버튼·입력칸은 브라우저 기본이 시스템 글꼴(윈도우 돋움·굴림 등)이므로 본문 글꼴을 물려받게 한다. 크기는 각 컴포넌트가 정한다. */
button, input, select, textarea { font-family: inherit; }