/* ============================================================
   BoBi v2 — 공통 디자인 토큰
   Meta(Dolly/FDS) 기반 + 기존 BoBi 브랜드 컬러 #42BAFF 확장
   ============================================================ */

@font-face {
  font-family: 'Pretendard';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  /* ===== 브랜드 컬러 패밀리 (#42BAFF 기반, Figma 기존 톤 확장) ===== */
  --brand:        #42BAFF;  /* 메인 액션 컬러 */
  --brand-bright: #66E1FF;  /* 시안 하이라이트 */
  --brand-soft:   #C2F3FF;  /* 연한 틴트 */
  --brand-pale:   #EEF9FF;  /* 배경 틴트 */
  --brand-hover:  #2BA4EE;  /* 호버 */
  --brand-deep:   #1C50A1;  /* 딥 블루 (그라데이션 끝) */
  --brand-ink:    #092535;  /* 네이비 잉크 (다크 베이스) */
  --brand-grad:   linear-gradient(135deg, #66E1FF 0%, #42BAFF 45%, #1C50A1 100%);
  --brand-grad-soft: linear-gradient(135deg, #42BAFF 0%, #1C50A1 100%);

  /* ===== 중립 (Meta 그레이) ===== */
  --white:    #FFFFFF;
  --bg:       #FFFFFF;
  --bg-soft:  #F4F7FA;   /* soft gray */
  --bg-warm:  #F8FAFC;
  --line:     #E6EBF0;   /* divider */
  --line-strong: #D4DBE2;

  --ink:      #0E1A24;   /* primary text */
  --ink-2:    #44545F;   /* secondary text */
  --ink-3:    #7C8B97;   /* tertiary / caption */
  --ink-4:    #AEB9C2;   /* disabled */

  /* 다크 서피스 (시안 C) */
  --dark-0:   #071620;
  --dark-1:   #0C2230;
  --dark-2:   #11303F;
  --dark-line:rgba(102,225,255,0.14);
  --dark-text:#E8F4FB;
  --dark-text-2:#8FB0C2;

  /* ===== 카테고리(진료) 시맨틱 ===== */
  --c-out:   #FF7A85;  /* 통원 */
  --c-in:    #2ABBA7;  /* 입원 */
  --c-surg:  #9360F7;  /* 수술 */
  --c-med:   #42BAFF;  /* 투약 */
  --c-out-bg:#FFF0F1;
  --c-in-bg: #E7FAF6;
  --c-surg-bg:#F3EDFF;
  --c-med-bg:#EAF7FF;

  --success: #1FA463;
  --warning: #F6A609;

  /* ===== 타입 스케일 — 4단계 (제목1·제목2·본문·옵션) ===== */
  --fs-h1:      24px;  /* 제목1 — 페이지/섹션 큰 제목 */
  --fs-h2:      19px;  /* 제목2 — 카드/서브 섹션 제목 */
  --fs-body:    15px;  /* 본문 — 일반 텍스트·게시글 제목·표 */
  --fs-option:  13px;  /* 옵션 — 캡션·라벨·메타·칩 */

  /* 기존 토큰 별칭 (호환용, 4단계로 매핑) */
  --fs-display: var(--fs-h1);    /* 24 */
  --fs-title:   var(--fs-h2);    /* 20 */
  --fs-sub:     var(--fs-body);  /* 16 */
  --fs-label:   var(--fs-option);/* 14 */

  /* ===== 라운드 ===== */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 100px;

  /* ===== 그림자 ===== */
  --sh-1: 0 1px 2px rgba(14,26,36,.04), 0 2px 8px rgba(14,26,36,.05);
  --sh-2: 0 8px 24px rgba(14,26,36,.08), 0 2px 6px rgba(14,26,36,.05);
  --sh-brand: 0 10px 30px rgba(66,186,255,.32);
  --sh-glow: 0 0 0 1px rgba(102,225,255,.18), 0 12px 40px rgba(20,120,200,.35);

  /* ===== 간격 (8px 그리드) ===== */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px;
}

* { box-sizing: border-box; }

.bobi {
  font-family: 'Pretendard', system-ui, sans-serif;
  color: var(--ink);
  font-feature-settings: "ss01","ss02";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* 타입 유틸 (4단계 — 제목1·제목2·본문·옵션) */
.t-h1     { font-size: var(--fs-h1);     font-weight: 800; line-height: 1.3;  letter-spacing: -0.02em; }
.t-h2     { font-size: var(--fs-h2);     font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; }
.t-body   { font-size: var(--fs-body);   font-weight: 400; line-height: 1.55; }
.t-option { font-size: var(--fs-option); font-weight: 500; line-height: 1.5;  }

/* 호환 별칭 */
.t-display { font-size: var(--fs-h1);     font-weight: 800; line-height: 1.3;  letter-spacing: -0.02em; }
.t-title   { font-size: var(--fs-h2);     font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; }
.t-sub     { font-size: var(--fs-body);   font-weight: 700; line-height: 1.4; }
.t-label   { font-size: var(--fs-option); font-weight: 500; line-height: 1.5; }

/* 부드러운 전환 기본값 */
.tap { transition: transform .15s ease, box-shadow .3s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.lift:hover { transform: translateY(-3px); }