/* =========================================================
 * variables.css — 전역 CSS 변수(디자인 토큰)
 * - layout.css 보다 먼저 로드되어야 함 (header.php)
 * - html { font-size: 62.5% } 기준 → 1rem = 10px
 * ========================================================= */
:root{
    /* ----- 기존 layout.css :root 이전 항목 ----- */
    --main-color-1:#4A775F;
    --main-color-2:#e9a5b4;
    --main-color-3:#3d4c78;
    --main-color-4:#2F4F7F;
    --main-color-5:#A67B5B;
    --main-color-6:#D9D9D9;
    --main-color-7:#FDFCF7;
    --font-color-1:#575757;
    --font-color-2:#2a2a2a;
    --max-width:1380px;
    --ui-width:calc(100% - 60px);

    /* ----- 색상(Color) : 추출 빈도 기반 추가 ----- */
    --white:#ffffff;          /* #fff / #ffffff 통일 (184회) */
    --black:#000000;          /* (7회) */
    --gray-bg:#f8f8f8;        /* 연한 배경 (46회) */
    --gray-bg-2:#f5f5f5;      /* 연한 배경2 (6회) */
    --border-gray:#c8c8c8;    /* 기본 테두리 (45회) */
    --border-gray-2:#cccccc;  /* 테두리2 (28회) */
    --gray-3:#d2d2d2;         /* (11회) */
    --gray-text:#999999;      /* 보조 텍스트 (5회) */
    --blue:#4c7bc1;           /* 포인트 블루 (7회) */
    --point-pink:#ef6c8b;     /* 포인트 핑크 (5회) */
    --pink-bg:#ffeef2;        /* 핑크 배경 (5회) */
    --red:#bb2d2d;            /* 경고/필수 (4회) */
    /* 참고: #3d4c78=--main-color-3(+rgba(61,76,120,1) 동일), #d9d9d9=--main-color-6,
       #2a2a2a=--font-color-2, #e9a5b4=--main-color-2 → 기존 변수 재사용 */

    /* ----- 글꼴 크기(font-size) 스케일 : 1rem=10px ----- */
    --fz-sm:1.6rem;     /* 16px (52회) */
    --fz-18:1.8rem;     /* 18px (32회) */
    --fz-base:2rem;     /* 20px (120회) 기본 */
    --fz-22:2.2rem;     /* 22px (20회) */
    --fz-md:2.4rem;     /* 24px (67회) */
    --fz-25:2.5rem;     /* 25px (59회) */
    --fz-lg:2.8rem;     /* 28px (63회) */
    --fz-xl:3rem;       /* 30px (52회) */
    --fz-2xl:3.2rem;    /* 32px (34회) */
    --fz-title:3.5rem;  /* 35px (31회) */
    --fz-3xl:4rem;      /* 40px (29회) */

    /* ----- 간격(spacing) 스케일 : padding/margin ----- */
    --sp-1:0.5rem;      /* 5px */
    --sp-2:1rem;        /* 10px */
    --sp-3:1.5rem;      /* 15px */
    --sp-4:2rem;        /* 20px */
    --sp-6:3rem;        /* 30px */
    --sp-10:5rem;       /* 50px */

    /* ----- 모서리 둥글기(border-radius) 스케일 ----- */
    --radius-xs:5px;     /* (9회) */
    --radius-sm:8px;     /* (6회) */
    --radius-md:1rem;    /* 10px (16회) */
    --radius-lg:2rem;    /* 20px (28회) */
    --radius-30:30px;    /* (7회) */
    --radius-pill:999px; /* 완전 둥근 버튼 (6회) */
    --radius-circle:50%; /* 원형 (7회) */
}