/* ============================================================
   Bboggl 디자인 시스템 — 색 조합: 노션 모노톤 (내 재료, 우선 적용)
   폰트: Space Grotesk (내 재료, 우선 적용)
   버튼: 외곽선 스타일 (내 재료, 우선 적용)
   아이콘: 라인 기본 + 활성 상태만 솔리드 (질문 답변 반영)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

:root{
  /* --- 색 조합 (노션 모노톤) --- */
  --primary:#2383E2;
  --text:#191919;
  --sub:#787774;
  --bg:#FFFFFF;
  --surface:#F7F6F3;
  --border:#E9E9E7;

  /* 보조 색상 (베이스 흑백폰 분위기를 유지하기 위한 그레이스케일 확장) */
  --black:#0F0F0F;
  --gray-900:#191919;
  --gray-700:#3A3A38;
  --gray-500:#787774;
  --gray-300:#B8B7B4;
  --gray-100:#E9E9E7;
  --gray-50:#F7F6F3;
  --white:#FFFFFF;
  --danger:#E4574C;
  --success:#2F9E67;

  /* 라이브 소셜프루프 강조용 (그레이스케일 유지, 점만 primary) */
  --live-dot:#2383E2;

  /* --- 형태 --- */
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;
  --radius-pill:999px;

  /* --- 그림자 --- */
  --shadow-sm:0 1px 2px rgba(15,15,15,.06);
  --shadow-md:0 4px 12px rgba(15,15,15,.08);
  --shadow-lg:0 12px 32px rgba(15,15,15,.14);

  /* --- 레이아웃 --- */
  --header-h:60px;
  --container-w:1200px;
}

body{
  font-family:'Space Grotesk','Inter',sans-serif;
  color:var(--text);
  background:var(--bg);
}
h1,h2,h3,h4{font-weight:700;}
p,span,li,a,button,input,select,textarea{font-weight:400;}

/* --- 아이콘: 라인(기본) --- */
.icon{
  width:24px;height:24px;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0;
}
/* --- 아이콘: 솔리드 (활성/선택 상태 전용) --- */
.icon.is-active,
.icon-solid{
  fill:currentColor;stroke:none;
}