@charset "utf-8";
/* ============================================================
   lydia-variables.css
   리디아 여성의원 — 디자인 토큰 (CSS Custom Properties)
   ============================================================ */

:root {

  /* ─── 브랜드 컬러 ─────────────────────────────────── */
  --main-color        : #732269;   /* 메인 퍼플 보라 (로고·강조) */
  --main-color-dark   : #591b50;   /* hover / 어두운 상태 */
  --main-color-light  : #a85a9e;   /* 연한 보라 포인트 */

  --accent-pink       : #e8b4d8;   /* 소프트 핑크 */
  --accent-rose       : #c96b9a;   /* 로즈 핑크 강조 */
  --accent-lilac      : #d4a8d0;   /* 라일락 */
  --accent-lavender   : #f2eaf5;   /* 라벤더 배경 */
  --accent-purple     : #3e2361;   /* 퍼플 강조 */
  --accent-golden     : #e4c394;   /* 골든 옐로우 */

  --kakao-yellow      : #FEE500;   /* 카카오 옐로우 */

  /* ─── 텍스트 컬러 ────────────────────────────────── */
  --txt-base          : #333333;
  --txt-muted         : #777777;
  --txt-light         : #aaaaaa;
  --white             : #ffffff;

  /* ─── 배경 컬러 ──────────────────────────────────── */
  --bg-base           : #ffffff;
  --bg-soft           : #faf7fb;   /* 아주 연한 라벤더 화이트 */
  --bg-section        : #f5f0f4;   /* 섹션 구분 배경 */
  --bg-genuine        : #f0eef5;   /* 정품정량 섹션 */
  --bg-clinic         : #1a1a1a;   /* 클리닉 소개 어두운 배경 */
  --bg-notice         : #ffffff;

  /* ─── 배너 슬라이드 배경 ─────────────────────────── */
  --banner-bg-01      : #f7ece8;   /* 베이지 핑크 */
  --banner-bg-02      : #f3ead0;   /* 크림 */
  --banner-bg-03      : #e8eef5;   /* 연한 블루 그레이 */
  --banner-bg-04      : #f0e8f5;   /* 연한 라벤더 */

  /* ─── 서비스 카드 오버레이 ───────────────────────── */
  --card-overlay-01   : rgba(115, 34, 105, 0.65);
  --card-overlay-02   : rgba(170, 80, 150, 0.65);
  --card-overlay-03   : rgba(200, 100, 140, 0.65);
  --card-overlay-04   : rgba(90,  50, 120, 0.65);
  --card-overlay-05   : rgba(140, 60, 160, 0.65);
  --card-overlay-06   : rgba(180, 90, 110, 0.65);

  /* ─── 타이포그래피 ───────────────────────────────── */
  --font-sans         : "Noto Sans KR", sans-serif;
  --font-serif        : "Ridibatang", serif;

  /* 폰트 사이즈 스케일 */
  --fs-xs   : 0.75rem;    /* 12px */
  --fs-sm   : 0.8125rem;  /* 13px */
  --fs-body : 0.9375rem;  /* 15px */
  --fs-md   : 1rem;       /* 16px */
  --fs-lg   : 1.25rem;    /* 20px */
  --fs-xl   : 1.5rem;     /* 24px */
  --fs-2xl  : 2rem;       /* 32px */
  --fs-3xl  : 2.5rem;     /* 40px */
  --fs-4xl  : 3rem;       /* 48px */
  --fs-hero : 3.5rem;     /* 56px */

  /* 라인헤이트 */
  --lh-tight  : 1.25;
  --lh-normal : 1.6;
  --lh-loose  : 1.85;

  /* ─── 스페이싱 ───────────────────────────────────── */
  --sp-2xs  : 0.25rem;   /* 4px  */
  --sp-xs   : 0.5rem;    /* 8px  */
  --sp-sm   : 0.75rem;   /* 12px */
  --sp-r    : 1rem;      /* 16px */
  --sp-md   : 1.25rem;   /* 20px */
  --sp-lg   : 1.5rem;    /* 24px */
  --sp-xl   : 2rem;      /* 32px */
  --sp-2xl  : 2.5rem;    /* 40px */
  --sp-3xl  : 3rem;      /* 48px */
  --sp-4xl  : 4rem;      /* 64px */
  --sp-5xl  : 5rem;      /* 80px */

  /* ─── 레이아웃 ───────────────────────────────────── */
  --max-width       : 1200px;
  --max-width-sm    : 960px;
  --safe-padding    : clamp(1rem, 5vw, 4rem);

  /* ─── 테두리 & 그림자 ────────────────────────────── */
  --radius-sm   : 0.5rem;
  --radius-r    : 1rem;
  --radius-lg   : 1.5rem;
  --radius-pill : 50em;

  --shadow-sm   : 0 2px 8px  rgba(115, 34, 105, 0.10);
  --shadow-md   : 0 4px 20px rgba(115, 34, 105, 0.18);
  --shadow-lg   : 0 8px 32px rgba(115, 34, 105, 0.22);

  /* ─── 트랜지션 ───────────────────────────────────── */
  --ease-out  : cubic-bezier(0.22, 1, 0.36, 1);
  --duration  : 0.35s;
}